Why is there a visible gap between adjacent DIVs o

2019-07-26 22:44发布

问题:

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>

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?

回答1:

It could be construed as a bug (I think it is) - but it has to do with the way iOS handles background images.

The quick answer - add a negative margin to one of your elements. See this JSFiddle.

The relevant portion is this:

#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.