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

如何解决确定哪个 DOM 元素导致父元素的尺寸增加

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

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

在 Firefox 或 Chrome devtools（或使用插件）中有没有办法查看哪个 DOM 子元素决定当前元素的尺寸？

解决方法

确定元素的计算宽度和高度的定义是非常棘手的。 Chrome 和 Firefox DevTools 都没有提供在所有情况下都可以轻松获取该信息的方法。据我所知，也没有可用的扩展使这更容易。不过，前段时间的 Firefox DevTools team started a discussion on this。

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

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

尽管如此，以下是一些如何使用 DevTools 确定元素宽度和高度定义的技巧：

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

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

rootElement = $0;
rootWidth = rootElement.getBoundingClientRect().width;
walker = document.createTreeWalker(root,NodeFilter.SHOW_ELEMENT,{
  acceptNode: element =>
    element.getBoundingClientRect().width === rootWidth ?
      NodeFilter.FILTER_ACCEPT :
      NodeFilter.FILTER_SKIP
});

currentNode = walker.currentNode;
while (currentNode) {
  console.log(currentNode);
  currentNode = walker.nextNode();
}

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