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

Question

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

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

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

Answer 1

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

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

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

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

选择元素并在
1. Compated侧面板中检查计算值是否是通过CSS规则定义的。展开 width

    或 

   height

    的条目以查看应用了哪些 CSS 规则。另请检查 

   min-width

    和 

   max-width

    或 

   min-height

    和 

   max-height

    以及其他与布局相关的属性，例如 

   margin

   、

   border

    和 

   padding

   ，还有 

   display

   、

   align-self

   、

   line-height

   、等等！

检查元素内的文本是否影响其宽度或高度。没有中断机会的长单词（例如空格）可能是罪魁祸首，但 CSS 属性定义（例如
2. white-space: nowrap

   ）也可能是罪魁祸首。

当您检查了上述元素本身并找不到原因时，宽度或高度受到一个或多个后代元素的影响。所以你需要为他们重复这两个步骤。
3. a) 要快速查看直接子元素的尺寸，请首先按
   → 展开元素（如果尚未展开），然后按 ↓ 进行切换。在逐步执行它们时，请按照步骤 1 和 2 中的说明检查其 CSS 和文本。 b) 当您看到一个与您正在观察的元素一样宽时，请重复上一步以在 DOM 结构中再向下一层。

上面提到的步骤也可以通过使用一些 JavaScript 来遍历树并检查元素宽度或高度来自动化。一个相对简单的片段（可以在 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

 指的是当前选定的元素。