8

我<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;

提前致谢。

编辑：

问题中的 div 包含两个 div，一个在 中包含一行文本font-size: 16px;，另一个是高度为 367px 的 div。

另一个编辑：

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

最终编辑：

解决了！我将浮动 div 的内容用 包裹position: relative在第二个 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>
4

4 回答 4

3

与 IE 开发者工具栏一样，看看Firebug for Firefox。

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

于 2009-03-24T09:40:17.133 回答
1

元素的高度通常由其内容决定。你那里有 633px 的文字或其他东西吗？

计算的样式不一定来自任何样式表或 javascript。这就是渲染引擎计算完所有内容后样式的最终结果。

于 2009-03-24T09:33:24.027 回答
1

为 Internet Explorer安装IE Developer Toolbar。它有时会让生活变得更轻松。编辑： IE 的新版本默认包含开发人员工具，可通过按 F12 访问。

于 2009-03-24T09:37:38.403 回答
0

在此处输入图像描述

来自https://developer.chrome.com/devtools/docs/elements-styles的漂亮图表

单击“计算样式”以找出为什么/什么属性会相互覆盖。

于 2014-11-21T14:53:12.867 回答