Question

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

我附上了一张我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

Answer 1

在我的案例中使用：

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

而不是：

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

诀窍！

Answer 2

它会清楚地说明您的问题：http://jsbin.com/ilenu5/5

我做了什么：

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

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

为什么呢？因为您未设置viewport（width=device-width）和body的最小物理宽度（以px或cm或em为单位），所以默认情况下您的body宽度为980px，并由#wrapper继承 - 因此您的986px #headerpic溢出#wrapper，并显示您的黑色背景。由于溢出区域宽度很小（986-980 = 6px），您会看到一条黑线。

Answer 3

让#wrapper position:absolute解决问题。

Answer 4

就我而言：

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

并且：

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

解决问题。

Answer 5

应用

/

我的一个div做了它

给予@starkadh奖励以获得灵感。

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

5 个答案: