用不同定位的div - HTML CSS

我在我的網站頁腳和它看起來不錯在Chrome：用不同定位的div - HTML CSS

enter image description here

然而，這看起來不是在FF的好：

enter image description here

看起來像FF不認識我的css上的z-index屬性。下面的代碼：

footer.html

<div id="footer"> 
    <img src="layout/footer.png" style="position:absolute; z-index:-1;"></img> 

      <div class="socmed" style="margin-left:20px;"> 
      <a href="www.facebook.com"> 
      <img src="layout/fb.png"></img> 
      </a> 
      </div> 

      <div class="socmed"> 
      <a href="www.facebook.com"> 
      <img src="layout/tw.png"></img> 
      </a> 
      </div> 

      <div class="socmed"> 
      <a href="www.facebook.com"> 
      <img src="layout/yt.png"></img> 
      </a> 
      </div> 

      <div class="clear"></div> 

</div>

的style.css

#footer { 
    margin-top: 30px; 
    margin-bottom:-10px; 
} 

.socmed{ 
    float:left; 
    margin-left:10px; 
    padding-top:5px; 
}

有沒有什麼辦法解決這個問題，所以我有代碼的Chrome & FF將遵循相同的位置？（FF的定位看起來像Chrome的）。謝謝。

來源

2013-12-09 noobprogrammer

您的<img />即position:absolute; z-index:-1;應該簡單地是background-image的#footer。

#footer { 
    margin-top: 30px; 
    margin-bottom:-10px; 
    background: url('layout/footer.png') no-repeat 0 0; /* this line */ 
}

然後，它只會坐在你的圖標後面，你不必做任何事情。

然後，以確保#footer具有高度（因爲浮動孩子得到取出文件流的，所以你的div將不再有高度），你可以改變你的.socmed到：

.socmed{ 
    display: inline-block; /* this line */ 
    margin-left:10px; 
    padding-top:5px; 
}

這裏的代碼我從你的更新，並與我抓住從谷歌圖像的圖像：

http://jsfiddle.net/9V2KV/

來源

2013-12-09 04:04:22 Ming

用不同定位的div - HTML CSS

回答

相關問題