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

Question

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

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

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

Answer 1

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

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

在没有其他解决方案的情况下，隐藏或移除元素的解决方案可能是最快的解决方案。

不过，这里有一些提示如何使用 DevTools 来确定定义元素的宽度和高度：

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

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

rootElement = $0;
rootWidth = rootElement.getBoundingClientRect().width;
walker = document.createTreeWalker(rootElement, 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 指的是当前选定的元素。