FF＆amp;和FF之间的不同定位div Chrome - HTML CSS

Question

我的网站上有一个页脚，它在Chrome上看起来不错：

然而，它在FF上看起来并不那么好：

看起来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和＆amp; FF会遵守相同的立场吗？ （FF的定位看起来像Chrome）。感谢。

Answer 1

<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; } 到：

{{1}}

以下是我更新的代码，以及我从Google图片中抓取的图片：

http://jsfiddle.net/9V2KV/