外部でホストされている Facebook iframe ページに、CSS を使用してイメージ マップを含めました ( 2004 年の A List Apart のかなり古い記事で説明されています) 。a:link/a:hover のイメージを含むイメージ マップを使用しており、CSS は外部スタイルシートに含まれています。ページは Safari と Chrome では正しく表示されますが、Mac OS Xの Firefox 3.6 では表示されません。
インライン スタイルに戻すと、ページはFirefox で正しく表示されます。
スタイルがインラインで適用されたコードは次のとおりです。
<style type="text/css">
#home-page-nav {
width: 512px; height: 139px;
background: url(http://mysite.com/imagemap.jpg);
margin: 10px auto; padding: 0;
position: relative;}
#home-page-nav li {
margin: 0; padding: 0; list-style: none;
position: absolute; top: 0;}
#home-page-nav li, #home-page-nav a {
height: 141px; display: block;}
#blog-icon {left: 0; width: 127px;}
#links-icon {left: 128px; width: 128px;}
#twitter-icon {left: 256px; width: 128px;}
#flickr-icon {left: 384px; width: 128px;}
#blog-icon a:hover {
background: transparent url(http://mysite.com/imagemap.jpg)
0 -139px no-repeat;}
#links-icon a:hover {
background: transparent url(http://mysite.com/imagemap.jpg)
-128px -139px no-repeat;}
#twitter-icon a:hover {
background: transparent url(http://mysite.com/imagemap.jpg)
-256px -139px no-repeat;}
#flickr-icon a:hover {
background: transparent url(http://mysite.com/imagemap.jpg)
-384px -139px no-repeat;}
</style>
<ul id="home-page-nav">
<li id="blog-icon"><a href="http://donaldjenkins.net/"></a></li>
<li id="links-icon"><a href="http://links.donaldjenkins.net/"></a></li>
<li id="twitter-icon"><a href="http://twitter.com/donaldjenkins"></a></li>
<li id="flickr-icon"><a href="http://flickr.com/photos/astorg"></a></li>
</ul>
この歓迎を解決するための提案。
更新: 以下の Neil のおかげで解決策が見つかりました。他の誰かが同じ問題を抱えている場合に備えて、それを修正する方法を次に示します。解決策は、CSS ファイルをホストする Web サーバーの構成を更新することです。一部の Apache および iPlanet Web サーバーは、.CSS を持つファイルを、「text/plain」や「application/x-pointplus」などの不適切な MIME タイプに関連付けています。場合によっては、Netscape 7.x と Mozilla は、間違った MIME タイプが原因で CSS ファイルを無視し、デフォルトのスタイル シートを使用するため、レイアウトが Web 開発者が意図したものとは異なるものになります。詳細については、Mozilla Development Network のこのページを参照してください。
これを解決する最も簡単な方法は、.htaccess ファイルに次の行を含めることです。
AddType text/css .css