html - Why is there a visible gap between adjacent DIVs on iOS Safari? -
After pulling all my hair, it has come to this minimal HTML page which appears to be incorrect on iOS:
& lt ;; Doctype html & gt; & Lt; Html & gt; & Lt; Top & gt; & Lt; Style type = "text / css" & gt; # Folds {background: url (https://s3.amazonaws.com/gigantt_pub_imgs/2012/07/1342078193.png) top left; Minute-height: 350px; } # Feature {background: url (https://s3.amazonaws.com/gigantt_pub_imgs/2012/07/1342078193.png) top left; Minute-height: 350px; } & Lt; / Style & gt; & Lt; / Head & gt; & Lt; Body & gt; & Lt; Div id = "fold" & gt; & Lt; / Div & gt; & Lt; Div id = "features" & gt; & Lt; / Div & gt; & Lt; / Body & gt; & Lt; / Html & gt; On seeing in iOS (or for that case in the iOS simulator), you can see a small line between two blue divisions.
If you zoom in So this white line disappears. And of course this is not visible in any other desktop browser I've tried, either.
So, am I going crazy or getting someone else? Any idea how it works?
This can be applied as a bug (I think this is) - but it Have to do with the way.
Quick Reply - Add a negative margin to one of your elements.
The related part is:
# feature {background: url (https://s3.amazonaws.com/gigantt_pub_imgs/2012/07/1342078193.png) left To left; Minute-height: 350px; Margin-top: -2px; } You can target it using media queries.
Comments
Post a Comment