為什么iOS Safari上相鄰DIV之間存在明顯差距？

Question

拔掉我所有的頭發后，它已經歸結為這個在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之間看到一條直線。

在此輸入圖像描述

如果你放大，這條白線就會消失。當然，在我試過的任何其他桌面瀏覽器中都看不到它。

所以，我瘋了還是其他人得到這個？ 任何想法如何解決它？

Answer 1

它可以被解釋為一個錯誤（我認為是） - 但它與iOS處理背景圖像的方式有關。

快速回答 - 為您的某個元素添加負邊距。 看到這個JSFiddle 。

相關部分是這樣的：

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

您可以使用媒體查詢來定位它。

為什么iOS Safari上相鄰DIV之間存在明顯差距？

問題描述

1 個解決方案

解決方案1
3 已采納 2012-07-12 13:32:20

為什么iOS Safari上相鄰DIV之間存在明顯差距？

問題描述

1 個解決方案

解決方案1 3 已采納 2012-07-12 13:32:20

解決方案1
3 已采納 2012-07-12 13:32:20