<li>
背景画像を要素に適用する非常に単純なCSSがあります
.icon-facebook { background: url("./images/icon_facebook.png") no-repeat; }
これは、Web サーバーなしで、つまり .html ファイルをダブルクリックして、ローカルで表示すると問題なく動作します。
しかし、Apache を介して同じページを提供するとすぐに (ローカルホストでも運用サーバーでも)、背景画像が消えます。
ページ上の他の背景画像は正常に機能し、すべて同一の (相対) パスを持っています。
background-images への絶対パスを指定しても機能しません。
ファイルの名前を変更しても機能しませんでした。
ブラウザで直接ナビゲートすると、画像を問題なく表示できます。
Apache のアクセス ログを監視すると、CSS で絶対 URL が指定されていても、ブラウザーは画像を要求することさえしません (!) 。
Firebugを調べると、 <li>
「指定された URL を読み込めませんでした」と表示されますが、Firebug の CSS から直接背景画像の URL をコピーして新しいタブに貼り付けると、何だと思いますか? できます。
同じページに<div>
、同じフォルダーからの異なる背景画像があり、正常に機能します。そのファイル名を「問題のある」ファイルの 1 つに置き換えると、それが表示されなくなっていることに気付きました。
問題の画像は 20x20px の PNG です (ただし、JPG も試しました)。
他のすべてのブラウザは正常に動作します。
これは本当に私を夢中にさせています。