在 Firefox 中显示图像地图需要内联 CSS 吗？

Question

我已经使用 CSS 包含了一个图像映射（如这篇相当旧的 2004 年文章中所述） >A List Apart）位于外部托管的Facebook iframe 页面。我正在使用带有 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>

欢迎提出有关解决此问题的任何建议。

更新：感谢下面的尼尔找到了解决方案。以防万一其他人也遇到同样的问题，以下是解决方法。解决方案是更新托管 CSS 文件的 Web 服务器的配置。某些 Apache 和 iPlanet Web 服务器将具有 .CSS 的文件与不正确的 MIME 类型（例如“text/plain”或“application/x-pointplus”）相关联。在某些情况下，Netscape 7.x 和 Mozilla 会忽略 CSS 文件，因为它的 MIME 类型错误，并使用默认样式表，导致布局与 Web 开发人员的预期不同。有关更多详细信息，请参阅 Mozilla 开发网络上的此页面。

解决此问题的最简单方法是在 .htaccess 文件中包含以下行：

AddType text/css .css

Answer 1

作为一项安全功能，外部样式表必须使用 text/css MIME 类型提供，否则 Firefox 将忽略它们。