2013-10-02 104 views
1

沒有顯示我有去這樣的事情在我的網頁代碼的HTML部分:背景圖像在Firefox

<section class ="sidebar"> 
      <ul> 
       <li class="facebook">Facebook</li> 
       <li class="linkedin">LinkedIn</li> 
       <li class="twitter">Twitter</li> 
       <li class="google-plus">Google+</li> 
      </ul> 
</section> 

而CSS是這樣的:

.sidebar ul { 
    float: left; 
} 

.sidebar ul li{ 
    display: block; 
    width:35px; 
    text-indent: -9999px; 
    margin: 3px; 
} 

li.facebook{ 
    height: 35px; 
    background: url(img/icon_face.png) center center no-repeat; 
    background-size: contain; 
} 
li.twitter{ 
    height: 35px; 
    background: url(img/icon_twitter.png) center center no-repeat; 
    background-size: contain; 
} 
li.google-plus{ 
    height: 35px; 
    background: url(img/icon_g+.png) center center no-repeat; 
    background-size: contain; 

} 
li.linkedin{ 
    height: 35px; 
    background: url(img/icon_in.png) center center no-repeat; 
    background-size: contain; 
} 

什麼這裏發生的是我有兩個奇怪的問題:

首先元素li.google-plus不顯示在任何瀏覽器中。瀏覽器只是忽略它。以下是螢火蟲顯示:

Google-plus element disabled

第二個是顯示在Firefox的唯一圖像是Twitter的一個。在鉻和歌劇所有其他人顯示正確。由於它們在其他瀏覽器中正確顯示,我假設問題不在背景屬性中。

有什麼想法可能是什麼問題?

編輯:

檢查什麼螢火說,關於背景圖像路徑:

firebug says 'Can't load given url'

它說,它無法加載指定的URL。

+1

能重現上jsFiddle.net的問題? – j08691

+1

或者你可以發佈你的實際頁面? – andi

+0

在URL定義中使用'''時有什麼區別?像這樣:'url('img/icon_in.png')'。 –

回答

0

無論在.sidebar ul lili.facebook,li.twitter等你應該寫你沒有設置width:height:性能。

+0

謝謝你的提示。但是在兩者中設置這些屬性並不能解決問題。 – bfilipesoares