我在外部托管的this rather old 2004 article中包含了使用CSS的图像映射（如A List Apart中的a Facebook iframe page中所述）。我正在使用带有图像的图像映射进行a：link / a：hover，并且CSS包含在外部样式表中。该页面在Safari和Chrome中正确显示，但在Mac OS X中正确显示not in Firefox 3.6。
如果我切换回嵌入式样式，则Firefox中的displays properly页面。
这是内联应用样式的代码：
<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>
关于解决此欢迎的任何建议。
更新：由于以下尼尔找到了解决方案。以防万一其他人遇到相同的问题，以下是解决方法。解决方案是更新托管CSS文件的Web服务器的配置。某些Apache和iPlanet Web服务器正在将具有.CSS的文件与错误的MIME类型（例如“文本/纯文本”或“应用程序/ x-pointplus”）相关联。在某些情况下，Netscape 7.x和Mozilla由于其MIME类型错误而忽略了CSS文件，并使用默认样式表，该样式表导致布局与Web开发人员期望的布局不同。有关更多详细信息，请参见Mozilla开发网络上的this page。
解决此问题的最简单方法是在.htaccess文件中包含以下行：
AddType text/css .css
最佳答案
作为一项安全功能，外部样式表必须使用text/css MIME类型提供，否则Firefox将忽略它们。