19

如果我有一个 X 像素高的表格单元格，我能看到它究竟是什么原因吗？无论是兄弟姐妹的高度还是某个地方有 X 像素高度的<td>孩子？div

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

是否有某个浏览器扩展显示这种事情，并且省去了单击每个子/兄弟节点以检查它的 CSS 的麻烦？

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

4

2 回答 2

9

没有简单的方法来缩小哪个元素导致父元素改变其高度。根据情况，它可以是直接应用于父元素的样式，可以是一个子元素，也可以是多个子元素的组合。大多数浏览器都有内置的工具或可通过附加组件获得的工具，可以帮助更轻松地追踪有问题的风格，但不是很“容易”。

  • 火狐
  • 使用 Firebug，点击F12，确保您在 Inspector 选项卡上，然后单击 Inspector 选项卡左侧带有框的箭头并选择元素。样式将显示在右侧，并分为直接应用样式和从父元素继承的样式等类别。
  • IE浏览器
  • 点击F12，单击光标图标并选择元素。它将呈现直接应用的样式和继承的样式的树视图。
  • 谷歌浏览器
  • 点击F12，样式的显示将与 Firebug 类似。

请注意，在 Firebug 中，当您启用选择工具时，它将勾勒出光标下的元素，在页面上向您显示该元素的大小（就像您对其应用了border: 2px solid blue样式一样。它还将突出显示中的相应元素HTML 检查器，这样你就可以准确地知道你正在处理的元素。虽然这不会神奇地说“哦，嘿，这个特定的元素和样式是给你带来问题的那个”，但它会帮助你获得更清晰的视觉效果问题。

于 2013-10-08T17:29:05.923 回答
2

树行者

通常我只会在开发人员控制台中突出显示 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;
}
于 2020-12-25T19:41:41.637 回答