Question

我已经检查了其他主题，但我似乎无法解决这个问题。在此处测试此网站：http://www.mf.jlscs.com/

在Mobile Safari中的纵向视图中，我可以向右滚动到空白，白色填充。我不想要这个。

在横向视图中，此滚动不存在，并按照我的喜好呈现。

我不知道造成这种神秘推动的原因。我试图消除overflow-x，但这并不能解决问题。如果我在每个容器上消除overflow-x，那么对于页面中的每个容器都允许发生相同的效果。有什么想法吗？

Answer 1

只是为某些div添加边框会导致布局发生变化。将其添加到css的底部以找到流氓元素：

* {
  background: #000 !important;
  color: #0f0 !important;
  outline: solid #f00 1px !important;
}

我还制作了一个通过javascript执行此操作的书签，因此可以轻松地在任何网站上使用。 http://blog.wernull.com/2013/04/debug-ghost-css-elements-causing-unwanted-scrolling/

Answer 2

这很可能是由于您的一个结构元素超出了您的身体宽度。寻找像width: 100%; padding 20px;之类的代码，或者让它成为射击的东西。

我建议在所有主要的div上放一个红色边框，看看哪个是罪魁祸首并延伸到边缘。

Answer 3

确实，这个问题是由于＆＃34; rogue＆＃34;由于某种原因延伸到文档宽度之外的元素。

一种方法是使用上面的CSS，没有尝试过，但我不确定使用边框发现元素是多么容易。

另一种方法是在控制台中运行此JS代码以找到它们：

Array.prototype.filter.call(document.querySelectorAll('*'), function (node) { return node.clientWidth + node.offsetLeft > document.documentElement.clientWidth });

这将返回所有元素的数组，其宽度+偏移量（距离左侧的距离）大于clientWidth。

然后你需要检查元素并找出它们的行为方式 - 在我的例子中，页脚有width:100%和padding:10px，这导致它的宽度比文件宽度。

有趣的是，这只出现在iPhone上，而不是出现在Androids上。

Answer 4

我建议下载Web Developer for Firefox，然后启用Outline＆gt;大纲块级元素。

右侧移动Safari白色填充/边距

4 个答案: