哪个元素导致水平滚动条？自动检测[关闭]答案

【问题标题】：Which element is causing the horizontal scrollbar? Automated detection [closed]哪个元素导致水平滚动条？自动检测[关闭]
【发布时间】：2012-12-18 06:07:03
【问题描述】：

网站和 HTML 应用程序上的水平滚动条通常不利于可用性并且不受欢迎。发现它们意外出现是很常见的，我需要一种快速调试和删除它们的方法。

在您的设计中找到有问题的 HTML 元素的快速简便方法是什么？

是的，您可以逐个删除/隐藏页面，直到找到嫌疑人为止，但这很耗时，尤其是在存在多个违规元素的情况下。单击快捷方式或运行脚本并将所有可疑元素突出显示、概述或打印到控制台会很棒。

澄清一下：问题不在于如何解决它，而是如何检测它。我想要一个通用的解决方案，只要出现这个问题就可以工作。

【问题讨论】：

安装 Google Chrome 并使用开发者工具突出显示页面上的任何元素（Windows 上的 F12）。
这是我已经使用的方法......我期待一个使用 JavaScript 的自动化解决方案
它不会让我回答一个封闭的问题，但我喜欢建议的解决方案here:* { border: 1px solid #f00; }。每个元素都有一个边框，您可以很容易地看到哪些元素突出了一点。
我发现使用body * { outline: 1px #f00 solid; }似乎比* { border: 1px #f00 solid; }做得更好
这个问题是建设性的！

标签： javascript html css scrollbar

【解决方案1】：

如果您让内容流动，您一开始就不会出现水平滚动条。不要设置太多的宽度限制。通常，您只设置包含所有内容的主列的（最小）宽度。您还可以限制某些垂直条的宽度（例如导航条）。否则，请谨慎使用 CSS 宽度属性（和其他此类机制）。

CSS white-space 属性也倾向于需要滚动条；明智地使用此属性。这实际上仅适用于格式化代码，在 HTML 源代码中保持换行符以用于对齐目的很重要。

【讨论】：

问题不在于如何解决它......我的问题是如何检测它（我在这个问题的编辑中添加了我的意图）
我知道这并不能准确回答您的问题，但它可能会解决您的问题。您如何解决问题的想法是找到水平滚动条并摆脱它们。我的想法是不要一开始就创建它们，使用推荐的网络实践..
是的，你的意图是正确的......摆脱真正的问题......但我希望最大限度地减少识别有问题的组件所需的时间......之后，解决问题的解决方案真正的问题取决于该组件的开发方式
问题的关键在于，并不总是很明显在哪里那些不顺其自然的讨厌元素是。也许页面真的很长，也许元素比看起来更宽......

【解决方案2】：

在更窄的范围内，您可以使用 jQuery（获取宽度）和 node.scrollWidth 获取内容超出其边界的节点。

http://jsfiddle.net/tomprogramming/v3Q6W/3/

【讨论】：