Html 绝对定位div在safari中向上浮动

我的网站的页脚是一个相对定位的粘性页脚。在里面我有一个绝对定位的div包含一个图像。除了safari之外，我测试过的每个浏览器中的定位都很好，在safari中，图像似乎分离并浮动。以下是两个屏幕打印，一个来自chrome，另一个来自safari，以说明问题：

我在stack overflow和internet上一直在研究这个问题，但似乎找不到答案。任何帮助或重定向到一个链接，我可以找到帮助将不胜感激。谢谢大家!

footer {
background:#d4d3d3;
bottom:0;
clear:both;
display:block;
height:4em;
margin:0 auto;
margin-top:-4em;
padding-top:0.5em;
position:relative;
text-align:center;
width:100%;
z-index:1;
}

div#image {
float:none;
position:absolute;
top:-75px;
z-index:-1;
width:100%;
}

HTML

---

很可能您使用的是较早版本的Safari，它不识别HTML5元素，例如页脚。我还将简化您的css，如下所示：

footer {
    background: #d4d3d3;
    clear: both;
    display: block;
    height: 4em;
    margin: -4em auto 0;
    padding: 0.5em 0 0;
    position: relative;
    text-align:center;
    z-index:1;
}

footer img.semanticnameforimage {
    position: absolute;
    top: -75px;
    z-index: -1;
}

<footer> 
   <img src="img/img1.png" alt="alt text for image" class="semanticnameforimage">
</footer>

---

您使用的是哪个版本的Safari？PC的5版已经过时。它理解HTML5页脚元素吗？那可能是你的问题。它在IE8中也失败了吗？非常感谢！！我正在使用Safari 5.1.7，这可能是问题所在…我将更新并查看发生的情况：

footer {
    background: #d4d3d3;
    clear: both;
    display: block;
    height: 4em;
    margin: -4em auto 0;
    padding: 0.5em 0 0;
    position: relative;
    text-align:center;
    z-index:1;
}

footer img.semanticnameforimage {
    position: absolute;
    top: -75px;
    z-index: -1;
}

<footer> 
   <img src="img/img1.png" alt="alt text for image" class="semanticnameforimage">
</footer>