在Firefox中显示图像映射所需的内联CSS？

我在外部托管的a Facebook iframe page中包含了一个使用CSS的图像映射（如this rather old 2004 article中的A List Apart）。我使用带有图像的图像映射：link/a：hover，CSS包含在外部样式表中。该页面在Safari和Chrome中正确显示，但在Mac OS X上为not in Firefox 3.6。在Firefox中显示图像映射所需的内联CSS？

如果我切换回内联样式，则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>

任何建议，解决这个欢迎。

更新：由于Neil低于，因此找到了解决方案。以防其他人有相同的问题，这里是如何解决它。解决方案是更新托管CSS文件的Web服务器的配置。某些Apache和iPlanet Web服务器正在将具有.CSS的文件与不正确的MIME类型（如“text/plain”或“application/x-pointplus”）关联。在某些情况下，Netscape 7.x和Mozilla会忽略CSS文件，因为它的MIME类型不正确，并使用默认样式表，导致布局与Web开发人员预期的不同。有关更多详细信息，请参见Mozilla Development Network上的this page。

最简单的方法解决它是通过在.htaccess文件以下行：

AddType text/css .css

来源

2011-02-24 Donald Jenkins

在FF中开始调试的一个非常简单的方法是下载并安装Firebug插件。打开它并检查您的imagemap元素，并查看正在应用哪些类以及背景图像是否正确加载。 – easwee 2011-02-24 09:52:26

+1为Firebug。它会改变你的生活，男人。 – 2011-02-25 21:36:02

作为一项安全功能，外部样式表必须与text/css MIME类型提供，否则会被忽略通过Firefox。

来源

2011-02-25 21:31:08 Neil

确实回答了这个问题。 Firefox中的页面[现在完全加载]（http://www.facebook.com/donaldjenkins.net?sk=app_186821848024009）。谢谢。我已经更新了该问题，以更详细地评论该解决方案。 – 2011-02-25 22:03:11

@Donald Jenkins我正在寻找那个链接，但由于某种原因找不到它;我很高兴你找到了！ – Neil 2011-02-26 16:26:18

在Firefox中显示图像映射所需的内联CSS？

回答

相关问题