浏览器渲染右边距iPhoneiPadwebkit_app

概述我在下面有一个html片段,可以在所有浏览器中完美呈现.然而,在 iphone和ipad上的webkit中,当我捏页面(使其更小)时,我看到一个黑色边框,这是身体的背景颜色,只在右边缘闪耀.这只发生在我指定.headerpic div的宽度时.因为这是我在文档中唯一指定宽度的地方,所以我想知道为什么它不能一直渲染到右边缘(因为这理论上是文档中最宽的部分？). 我附上了一张从我的iPad上看起来像的我在下面有一个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 >        </div>      </div>    </div>    <div ID="footer">    </div>  </body></HTML>

解决方法它会清楚地说明你的问题： http://jsbin.com/ilenu5/5

我做了什么：

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

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

为什么？因为你没有设置你的视口(wIDth = device-wIDth)和身体的最小物理宽度(以px或cm或em为单位),所以你的身体宽度默认是980px,并且由#wrapper–继承所以你的986px #headerpic溢出#wrapper,使你的黑色背景出现.由于溢出区域宽度很小(986-980 = 6px),您会看到一条黑线.

总结

以上是内存溢出为你收集整理的浏览器渲染右边距iPhone / iPad / webkit全部内容，希望文章能够帮你解决浏览器渲染右边距iPhone / iPad / webkit所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1083399.html

浏览器渲染右边距iPhoneiPadwebkit

发表评论

评论列表（0条）