为什么iOS Safari上相邻DIV之间存在明显差距？

时间：2012-07-12 07:44:23

标签： html css mobile-safari

拔掉我所有的头发后，它已经归结为这个在iOS上似乎错误渲染的最小html页面：

<!doctype html>
<html>
<head>

<style type="text/css">

#fold
{
    background:url(https://s3.amazonaws.com/gigantt_pub_imgs/2012/07/1342078193.png) top left;
    min-height:350px;
}


#features
{
    background:url(https://s3.amazonaws.com/gigantt_pub_imgs/2012/07/1342078193.png) top left;
    min-height:350px;       
}   
</style>
</head>
<body>
    <div id="fold">
    </div>
    <div id="features">

    </div>
</body>
</html>

在iOS中查看（或在iOS模拟器中查看）时，您可以在两个蓝色div之间看到一条直线。

enter image description here

如果你放大，这条白线会消失。当然，在我试过的任何其他桌面浏览器中都看不到它。

所以，我疯了还是其他人得到这个？知道怎么解决它吗？

1 个答案:

答案 0 :(得分：3)

它可以被解释为一个错误（我认为是） - 但它与iOS handles background images的方式有关。

快速回答 - 为您的某个元素添加负边距。 See this JSFiddle

相关部分是：

#features
{
    background:url(https://s3.amazonaws.com/gigantt_pub_imgs/2012/07/1342078193.png) top left;
    min-height:350px;
    margin-top: -2px;    
}

您可以使用媒体查询来定位此内容。

相关问题
最新问题