浏览器渲染右边距iPhone/iPad/webkit

我有一个html代码片段，它在所有浏览器中完美渲染。然而，在iphone和ipad上的webkit中，当我捏住页面（使其更小）时，我看到一个黑色边框，它是仅在右侧边缘闪烁的背景色。这只发生在我指定.headerpic div的宽度时。由于这是文档中唯一指定宽度的地方，我想知道为什么它不能完全呈现到右边缘（因为这在理论上是文档中最广泛的部分？）。浏览器渲染右边距iPhone/iPad/webkit

我附上了一张从我的ipad看起来像的照片。

<!doctype html> 
<html> 

    <head> 

    <style> 
     body {background-color:#000;color:#231f20;margin:0;} 
     #wrapper {background-color:#fff;min-height:1000px;} 
     #header .headerpic {height:102px;padding-top:80px;margin:0 auto;width:986px;} 
     #footer {color:#fff;} 
    </style> 
    </head> 

    <body> 

    <div id="wrapper"> 
     <div id="header"> 
     <div class="headerpic"> 
     </div> 
     </div> 
    </div> 

    <div id="footer"> 
    </div> 

    </body> 
</html>

Photo Of problem

来源

2011-03-01 robzolkos

这将说明你的问题有点清晰：http://jsbin.com/ilenu5/5

我所做的：

我增加了 #headerpic的宽度1286px
我加的#headerpic一个背景颜色，这是红色的

所以你的实际问题是：溢出发生

为什么？因为你没有设置你的viewport（width=device-width）和最小物理宽度（以像素或厘米或EM）的body，所以你body宽度默认为980px，并通过#wrapper继承 - 让你的986px #headerpic溢出#wrapper ，并显示黑色背景。由于溢出的区域宽度很小（986-980 = 6px），您会看到一条黑线。

来源

2011-03-01 18:32:10 vincicat

谢谢！我将body的最小宽度设置为986px，问题在iphone/ipad中修复，并且不会影响正常的浏览器。谢谢你的帮助。 – robzolkos 2011-03-01 20:40:52

不客气:) – vincicat 2011-03-02 03:32:41

我想这是一个很好的解释为什么这个问题正在发生，但对我来说，它似乎并没有转化为解决方案。 [这个其他答案]（http://stackoverflow.com/a/15029243/199712）是什么修复它对我来说。 – 2015-11-30 13:57:31

制作#wrapperposition:absolute解决了这个问题。

来源

2011-03-01 15:03:30 Alex

确实，这可以修复iphone/ipad上的问题，但会破坏正常浏览器中的设计。 – robzolkos 2011-03-01 20:40:01

在我的情况下使用：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

相反的：

<meta name="viewport" content="width=device-width">

的伎俩！

来源

2013-02-22 16:53:51

这对我有用。似乎这应该是被接受的答案。 – 2015-11-30 13:58:01

在我的情况是：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

和：

html, body {min-width:980px; overflow-x: hidden;}

解决了这个问题。

来源

2014-09-29 15:12:57 Starkadh

应用

overflow-x:hidden;

我的div一个做了

给予信贷@starkadh为灵感。

来源

2016-03-12 18:00:32

浏览器渲染右边距iPhone/iPad/webkit

回答

相关问题