为什么在iOS Safari上相邻DIV之间存在明显的差距？ [英] Why is there a visible gap between adjacent DIVs on iOS Safari?
问题描述
把所有的头发拉出来后，这个最小的html页面似乎是在iOS上渲染错误：
After pulling all my hair out it has come down to this minimal html page that seems to be rendering wrongly on iOS:
<!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模拟器中查看），您可以看到
When viewing in iOS (or for that matter in the iOS simulator) you can see a while line between the two blue divs.
如果放大，此白线会消失。当然，在我尝试的任何其他桌面浏览器中也不会显示。
This white line disappears if you zoom in. And of course it's not visible in any other desktop browser I've tried, either.
那么，我要坚持还是别人得到这个？任何想法如何解决它？
So, am I going nuts or is anybody else getting this? Any idea how to work around it?
推荐答案
它可以解释为一个错误（我认为）与 iOS处理背景图片。
It could be construed as a bug (I think it is) - but it has to do with the way iOS handles background images.
快速回答 - 为您的其中一个元素添加一个负边距。 查看此JSFiddle 。
The quick answer - add a negative margin to one of your elements. 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;
}
您可以使用媒体查询进行定位。
You can target this using media queries.
这篇关于为什么在iOS Safari上相邻DIV之间存在明显的差距？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
