iPhone上奇怪的黑色区域

Posted 2023-03-12

【中文标题】iPhone上奇怪的黑色区域

【英文标题】：Strange black area on IPhone

【发布时间】：2014-06-09 09:04:11

【问题描述】：

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

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

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

我已经附上了截图：

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

补充：

这里是一个活生生的例子：

离线示例，抱歉

【问题讨论】：

你的菜单是画布的吗？

What could be causing this? 页面上任何太宽的元素。不过，我们无法帮助您在没有链接的情况下找到它们。

@TomRudge 是的，我相信是的，我还没有开始这个项目，我只是接手了。

@ralph.m 抱歉，我忘记了链接，我添加了它。奇怪的是，元素可以比html或body更宽？

【参考方案1】：

在某个地方，在某个时刻，你有一个元素带有一些额外的填充、边框或边距，这会让事情变得糟糕透顶。我无法找到它，但是这些天来消除它的一种简单方法是在您的样式表中使用它（通常用作标准重置的一部分）：

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

这似乎解决了这个问题，尽管在您的下一个项目中，我建议不要设置固定宽度，而是使用 width: 100% 等，因为屏幕窄于 300 像素的用户仍然会遇到问题。

【参考方案2】：

好的，所以这是 iphone 和 windows 手机上的渲染问题。我无法在谷歌浏览器和三星银河上复制这个问题。由于以下...

放...

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

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

您的导航是全宽的，但容器不是，您的部分和 div 在容器内结束，但在容器外开始。

【讨论】：

谢谢你的回答，但上面的回答很成功:)