iPhone上奇怪的黑色区域

Question

我有一个奇怪的问题。该网站正在使用模板，在iPhone上，它在右侧显示一个奇怪的黑色垂直条。

我安装了safari并激活了用户代理。当我将代理设置为ipad时，我看到了问题，但客户端告诉我它的IPhone。

奇怪的是，当我使用开发工具时，它似乎在html之外。可能是什么导致了这个？我已经尝试将html和body设置为100％宽度并将overflow-x设置为隐藏，但它没有帮助。

我附上了截图：

我以前从未见过这样的事情。会是什么呢？非常感谢！

此外：

这是一个实例：

离线示例，sry

Answer 1

在某个地方，在某些时候，你有一个带有一些额外填充，边框或边距的元素正在吹嘘。我无法追踪它，但是这些日子的一种简单方法是将它放在你的样式表中（通常用作标准重置的一部分）：

*, *:before, *:after {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}

这似乎解决了这个问题，虽然在你的下一个项目中，我建议不要设置固定宽度，而是使用宽度：100％等，因为屏幕上的用户比300px还要有问题。

Answer 2

好的，所以它是iphone和windows phone上的渲染问题。我不能在google chrome和三星galaxy上复制这个问题。由于以下...

把...

            <section id="main-top">
                <div id="bg">

在.container内。您将不得不重新分配您的背景。但问题在于导航和背景以及这些div的定位。

你的导航栏是全宽的，但是容器不是，你的部分和div在容器内结束但是从它开始。