时间戳

首页 > 解决方案 > 确定哪个 DOM 元素导致父元素的尺寸增加

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

问题描述

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

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

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

标签： htmlcssdomgoogle-chrome-devtoolsfirefox-developer-tools

解决方案

确定定义元素的计算宽度和高度的定义可能非常棘手。Chrome 和 Firefox DevTools 都没有提供在所有情况下获取该信息的简单方法。据我所知，也没有任何扩展可以使这更容易。不过，Firefox DevTools 团队前段时间开始讨论这个问题。

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

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

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

  1. 选择元素并在Computed侧面板中检查计算值是否是通过 CSS 规则定义的。展开条目width或height查看应用了哪些 CSS 规则。还要检查min-widthandmax-width或min-heightandmax-height以及其他与布局相关的属性，如margin, border, 以及padding`line-height 等！
  2. 检查元素内的文本是否影响其宽度或高度。像空格这样没有中断机会的长词可能是罪魁祸首，但 CSS 属性定义（如white-space: nowrap.
  3. 当您检查了上面的元素本身并且找不到原因时，宽度或高度受到一个或多个后代元素的影响。所以你需要为他们重复这两个步骤。
    a) 要快速查看直接子元素的尺寸，请先按→</kbd> to expand the element if it isn't already, then ↓</kbd> to toggle through them. While stepping through them, check their CSS and text as noted in steps 1 and 2. b) When you see one that is as wide as the element you are observing, repeat the previous step to get one more level down in the DOM structure.

上面提到的步骤也可以通过使用一些 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指的是当前选定的元素。

推荐阅读