Question

我网站的页脚是一个粘性页脚，具有相对定位。在里面我有一个绝对定位的div包含图像。定位在我测试的每个浏览器中都运行良好，除了safari，其中图像似乎分离并“浮起”。这里有两个屏幕打印，一个来自chrome，一个来自safari，用于说明问题：http://i57.tinypic.com/256z0jb.jpg

我一直在研究堆栈溢出和互联网上的这个问题，似乎无法找到答案。任何帮助或重定向到我可以找到帮助的链接将不胜感激。谢谢！

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

<footer> 
   <div id="image"><img src="img/img1.png"></div>
</footer>

Answer 1

可能您使用的旧版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>

绝对定位的div在safari中漂浮

1 个答案: