iOS   发布时间:2022-03-30  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了浏览器渲染右边距iPhone / iPad / webkit大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我在下面有一个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>

解决方法

它会清楚地说明你的问题: 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所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。