确定哪个 DOM 元素导致父元素的尺寸增加

Question

当网站未包含在移动视口内时，有时我会遇到此问题，并且我需要确定导致宽度超出的原因。

通常，我通过隐藏不同元素的反复试验来做到这一点，直到元素重置为所需的 100% 宽度。然后我对每个子元素重复，直到找到导致它的子元素。

Firefox 或 Chrome 开发工具（或使用插件）是否有办法查看哪个 DOM 子元素正在决定当前元素的尺寸？

Answer 1

确定什么定义了元素的计算宽度和高度可能非常棘手。Chrome 和 Firefox DevTools 都没有提供在所有情况下获取该信息的简单方法。据我所知，也没有可用的扩展可以使这变得更容易。不过， Firefox DevTools 团队不久前就开始对此进行讨论。

\n

元素可能比预期更宽或更高的原因有两个：元素本身或其子元素之一上的某些 CSS 或某些文本。

\n

当没有其他解决方案时，隐藏或删除元素的解决方案可能是最快的解决方案。

\n

尽管如此，这里还是一些如何使用 DevTools 来确定元素宽度和高度定义的提示：

\n

\n
1. 选择元素并在计算侧面板中检查计算值是否是通过 CSS 规则定义的。width展开或 的条目height以查看应用了哪些 CSS 规则。还要检查min-width和max-width或min-height和max-height以及其他布局相关的属性，例如、margin、border以及padding、、等！displayalign-selfline-height
\n
2. 检查元素内的文本是否影响其宽度或高度。没有中断机会的长单词（如空格）可能是罪魁祸首，但 CSS 属性定义（如white-space: nowrap.
\n
3. 当您检查了上述元素本身但无法找到原因时，宽度或高度会受到一个或多个后代元素的影响。因此，您需要为他们重复这两个步骤。
   \na) 要快速查看直接子元素的尺寸，请先按\xe2\x86\x92展开元素（如果尚未展开），然后\xe2\x86\x93在它们之间进行切换。在逐步浏览它们时，请按照步骤 1 和 2 中的说明检查它们的 CSS 和文本。\nb) 当您看到与您正在观察的元素一样宽的内容时，请重复上一步以在 DOM 结构中再向下一层。
\n

\n

上面提到的步骤也可以通过使用一些 JavaScript 来遍历树并检查元素宽度或高度来自动化。一个相对简单的片段（可以在 DevTools 控制台中执行）是

\n

rootElement = $0;\nrootWidth = rootElement.getBoundingClientRect().width;\nwalker = document.createTreeWalker(rootElement, NodeFilter.SHOW_ELEMENT, {\n  acceptNode: element =>\n    element.getBoundingClientRect().width === rootWidth ?\n      NodeFilter.FILTER_ACCEPT :\n      NodeFilter.FILTER_SKIP\n});\n\ncurrentNode = walker.currentNode;\nwhile (currentNode) {\n  console.log(currentNode);\n  currentNode = walker.nextNode();\n}\n

\n

其中$0指的是当前选定的元素。

\n