html - 找出某个计算的 CSS 样式的原因

Question

我有一个 <div>在最终计算出的高度属性为 633px 的网页上。这不是在任何级联样式表中设置的，无论是否内联，也不是在 javascript 中设置。我在我的代码中到处搜索，但数字 633 没有出现在任何地方。我可以通过设置 style="height: 420px;" 来解决这个问题这是我想要的高度，但 IE 似乎将其覆盖为默认情况下我也会在其他浏览器中获得的 633px。我已经在 Google Chrome 和 Firefox/Firebug 中验证了 div 的实际内容远不及 633 像素高。有什么办法可以找出这个计算高度的原因是什么？为了完整起见，这里是 Google Chrome 报告的 <div> 的样式属性。 .

Computed Style
background-color: white;
display: block;
float: left;
height: 633px;
margin-left: 30px;
margin-top: 20px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
width: 830px;

Inline Style Attribute
margin-left: 30px;
margin-top: 20px;

#overview
background-color: white;
float: left;
padding: 0px;
width: 830px;

#overview, #overviewempty
margin-top: 9px; (is crossed out)

div
display: block;

提前致谢。

编辑:

questions 中的 div 包含两个 div，一个在 font-size: 16px; 中包含一行文本, 和一个高度为 367px 的 div。

另一个编辑:

好的，所以我知道是什么原因造成的。主 div 包含的第二个 div 包含一个图像和一个 float 在该图像右侧的 div，使用 position: relative; top: -335px; . Internet Explorer 会保留此元素原本为空白的空间。有什么办法吗？

最终编辑:

解决了!我用 position: relative 包装了 float div 的内容。在第二个 div 中 position: absolute , 去掉了主图像下的空白 :) 最终的 HTML 看起来像这样:

<div id="overview">
  <div>Some text>
  <div>
    <img src="someImage.jpg">
    <div style="float: right; position: relative; top: -335px;">
      <div style="position: absolute; top: 0px; left: 0px; background-color: white; width: 365px;">
        Some floating contents
      </div>
    </div>
  </div>
</div>

Answer 1

与 IE Developer Toolbar 一样，看看 Firebug for Firefox .

这会告诉您所有应用于元素的样式，并显示哪些已被覆盖。