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

Question

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

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

Firefox 或 Chrome devtools(或使用插件)是否有办法查看哪个 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) 要快速查看直接子元素的尺寸，首先按 → 展开元素(如果尚未展开)，然后按 ↓ 切换它们。在逐步浏览它们时，按照步骤 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 指的是当前选中的元素。