爲什麼iOS Safari上的相鄰DIV之間存在明顯差距？

拉着我的頭髮後，它已下降到這個最小的HTML頁面，這似乎是在iOS上錯誤地渲染：爲什麼iOS Safari上的相鄰DIV之間存在明顯差距？

<!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

這種白線就會消失。當然，這是不以任何其他桌面瀏覽器我試過，無論是可見的。

那麼，我會堅果還是其他人得到這個？任何想法如何解決它？

來源

2012-07-12 Assaf Lavie

它可能被解釋爲一個錯誤（我認爲是） - 但它與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;  
}

您可以針對這一點使用媒體查詢。

來源

2012-07-12 13:32:20 chipcullen

如果圖案必須無縫且我不能讓它們重疊，我該怎麼辦？ – 2012-07-12 17:40:15

我仍然會使用媒體查詢來定位具有視網膜分辨率的設備，最大寬度爲768（例如iOS設備），並在其中設置頁邊距。您可能需要嘗試使用邊距的值以使其看起來正確。 – chipcullen 2012-07-12 18:05:32

爲什麼iOS Safari上的相鄰DIV之間存在明顯差距？

回答

相關問題