有没有工具可以展示一个 CSS 属性是如何计算的，如果它既不是继承的，也没有直接设置在元素上？

Question

如果我有一个高度为X像素的表格单元格，我能否查看是什么使其具有该高度 - 是否是兄弟的高度或者它是否有一个子

的高度为X像素？

基本上，我有这个，并且我想知道为什么它是172像素而不是150像素。高度在代码中从未明确设置。

是否有浏览器扩展程序可以显示此类信息，并省去了点击每个子/兄弟节点来检查其CSS的麻烦？

编辑：我已经知道大多数浏览器都有内置的DOM检查器。但是，如我在第一段中所说，不是所有CSS属性都是继承或直接设置在元素上的。我想知道是否有更好的工具显示属性的计算方式。

- Mihai

---

检查浏览器元素，你可以使用Chrome、FF、IE等几乎任何浏览器。不需要安装扩展程序，按F12即可。 - Josh Crozier

在Chrome调试器控制台中，您可以看到右侧的tr样式。您至少会知道是否在tr上设置了高度属性或是否已继承此属性。 - gp.

@JoshC 是的，我知道我可以这样做。然而，如果CSS属性没有继承或直接设置在元素上，使用这种方法并不总是方便的。我举了一个表格单元格的height属性的例子，它可以通过其子元素之一确定，也可以通过另一个兄弟td的高度或整个表格的高度来确定等等。 - Mihai

@Mihai，如果我理解有误，请纠正我。我的理解是这个问题不是关于CSS，而是关于DOM元素属性，尤其是大小方面的。因此，换句话说，是否有任何网页开发工具可以突出显示所选HTML元素的所有子元素及其相关大小属性（高度/宽度/填充/边距/位置）？ - Pavel

这是Web开发中的一个巨大问题。我希望能看到一种工具，它可以遍历CSS树，并以图形方式显示评估属性及其来自哪些类，哪些类覆盖了哪些属性，以及哪些指定了不可覆盖的!important设置。 - Jay Imerman

Answer 1

没有简单的方法来缩小是哪个元素导致父元素改变其高度。根据情况，它可能是直接应用于父元素的样式，也可能是一个子元素或多个子元素的组合。大多数浏览器都内置了工具或通过附加组件提供了帮助，可以使跟踪问题样式的任务更容易，但并不完全“容易”。

Firefox： 按下 F12 键，确保您在检查器选项卡上，并点击检查器选项卡左侧带有方框的箭头，然后选择元素。样式将显示在右侧，并分解为直接应用的样式和从父元素继承的样式等类别。

Internet Explorer： 按下 F12 键，单击光标图标并选择元素。它将呈现一个直接应用的样式和继承样式的树形视图。

Google Chrome： 按下 F12 键，样式的显示方式与 Firebug 类似。

请注意，在 Firebug 中，当您启用选择工具时，它将轮廓显示在鼠标指针下的元素上，向您展示元素在页面上的大小（就像您应用了 border: 2px solid blue 样式一样）。它还会在 HTML 检查器中突出显示相应的元素，以便您知道要处理哪个元素。虽然这不会神奇地说“噢，嘿，这个特定的元素和样式是给你带来问题的”，但它将帮助您更清晰地了解问题。

- Drew Chapin

---

也许我应该更清楚地表达我的问题，尽管我不确定如何做到这一点。请看这个JSFiddle。（http://jsfiddle.net/ZaeVF/）看看表格的高度是如何由第二段内联文本的高度确定的？如果从来没有明确说明高度，那么DOM检查器在这种情况下有什么用处呢？我可以看到计算出的值，但不知道它是如何计算出来的。在像这样的简单示例中，您可以一眼看出，但如果您有50、60个元素的层次结构，如何轻松找到罪犯呢？ - Mihai

@Mihai，请查看修订后的答案。 - Drew Chapin

是的，我也怀疑如此。好吧，谢谢你的回答！ - Mihai

我似乎总是陷入这些情况中。我很惊讶这些工具没有普及到足以回答“为什么这个元素这么大？”的问题。即使这些调试工具只是指示元素是被拉伸以填充其容器还是包含其子节点，也会很有帮助。 - Michael Scheper

在Chrome中的一条线索似乎是，如果一个元素被拉伸以填充其容器，则其宽度或高度显示会在“计算”选项卡下变得模糊。如果该元素的容器被拉伸，因为它有一个较大的兄弟姐妹，则至少似乎如此。我不认为有人找到了这些事情的清晰文档，他们有吗？（是的，我知道。“Google”和“文档”在同一个句子中看起来很有趣。） - Michael Scheper

Answer 2

TreeWalker

通常我会在开发者控制台中突出显示DOM树中的节点，但是我偶尔也会遇到与height相关的奇怪问题，因此从现在开始，这将是我可以使用的好工具。有一些技术细节需要考虑：

• 您必须使用TreeWalker，像childNodes这样的东西只适用于第一代后代，而不包括它们的子节点。
• 您需要使用scrollHeight。像getComputedStyle这样的东西将返回视觉渲染的高度，而不是完全渲染的高度。
• 如果没有后代元素，则编写此代码将return false。
• 虽然我不知道任何浏览器控制台内置（尚未）的内容，但至少这不依赖于任何框架或库。

要使用，请调用类似于element_find_descendant_tallest(document.getElementById('test1'));的内容。

---

function element_find_tallest_descendant(e)
{
 var walker = document.createTreeWalker(e,NodeFilter.SHOW_ELEMENT,null,false),
 height_current = 0;
 tallest = false;

 while (walker.nextNode())
 {
  var n = parseInt(walker.currentNode.scrollHeight);

  if (n != 'NaN' && n > height_current)
  {
   height_current = n;
   tallest = walker.currentNode;

   //Update console every time new tallest descendant found:
   console.log(walker.currentNode);
   console.log(n);
   console.log('---');
  }
 }

 return tallest;
}

- John

---

谢谢你，John！♥ 我认为这里有许多情况没有被涵盖到，例如当（父）元素的宽度是由其（某些）子元素的宽度之和得出时；或者当元素的大小是由祖先确定的时候。但这是一项很好的工作，肯定会在某些情况下有所帮助。你应该得到一些声望，姜饼人！:D - Aaron Thoma

@AaronThoma 谢谢你，Aaron。如果你想要的话，我可以接受挑战，只要你发布一个具体的新问题，并在这些评论中链接回来。通常很容易制作高度动态的函数。此外，如果您想要我的现有宝藏，请访问我的个人资料中的网站，然后转到JavaScript文档页面。 JavaScript函数名称会被动态检测，并且大量的文档都可以通过按需JavaScript获得。 - John

重新创建函数的挑战：太棒了，谢谢啦！ *牛仔帽子致意* 也许有一天我会尝试一下看看这个提议是否依然有效 :) 不过为了覆盖所有边缘情况（双关语），可能会非常复杂。如果有人想要解决这个问题，我认为最好深入研究 Blink（或其他浏览器引擎）的源代码，并跟踪其计算元素尺寸的方法（这些尺寸会以浅灰色显示在 DevTools 中，在上面的问题截图中可见）。 - Aaron Thoma

@AaronThoma 我会尽可能更新文档，并且在某个时候，我将对每个JavaScript函数进行重大审核。DAD是拖放的缩写，因为我不想为函数名称使用过长的前缀，是的，在晚2010年代和早2020年代，我们现在有足够的JavaScript来解决我想要做的95％的事情，如果我能暂停时间，我计划最终构建自己的浏览器/引擎/操作系统，其中包括当前软件未考虑到的重要事项。 - John

@AaronThoma 我的下一个任务是使用Treewalker在HTML电子邮件中查找所有文本节点，然后（因为我拒绝使用iframe并且使用XML解析器而不是HTML解析器）将确定background-color是什么，因此是否给定的文本节点具有足够的视觉对比度。许多电子邮件需要进行数十次修复，我已经编程并修改了电子邮件，需要在回复、转发或引用时添加注释。这是一段关于IR和我自然而然做的事情的优秀视频：https://www.youtube.com/watch?v=LvpjwHT7o4I - John