我在一个外部托管的 Facebook iframe 页面中包含了一个使用 CSS 的图像映射(如A List Apart中这篇相当古老的 2004 年文章中所述) 。我正在使用带有 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 的文件与不正确的 MIME 类型相关联,例如“text/plain”或“application/x-pointplus”。在某些情况下,Netscape 7.x 和 Mozilla 会因为其错误的 MIME 类型而忽略 CSS 文件,并使用导致布局与 Web 开发人员预期不同的默认样式表。有关更多详细信息,请参阅Mozilla 开发网络上的此页面。
解决它的最简单方法是在 .htaccess 文件中包含以下行:
AddType text/css .css