在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？

回答

相關問題