Question

示例：http://bit.ly/dfjvmT

如果您查看该网址，您会看到标有“发送给我们的简历”的<h3>。问题是 - 在IE6中，顶部有太多空间。它应该是16px的边缘顶部，但在IE6中，它看起来更像是24-30px。

我有一个reset.css文件，它将所有边距和填充都归零，所以不是那样。

刚刚检查过，CSS和XHTML都有效。

我注意到这个间距错误仅在我<div>之前放置<h3>时出现。目前，我<div class="top"></div>之前显示<h3>。该部分负责容器的圆角。当我删除<div>时，间距最终在IE6和Firefox中都匹配。

当然，我需要将<div>用于圆角。所以我想知道，究竟是什么导致了这个问题，有没有办法解决它？

由于

修改：找到解决方案。我必须将overflow:hidden添加到带有圆角的<div>的css中。

Answer 1

就在这里：

#send-resume .top, #send-resume .bottom {
    background: url('../_images/bg-form-top.gif') no-repeat;
    width: 351px;
    height: 3px;
    overflow: hidden;
}

大多数旧浏览器都将font-height合并到“自动”高度中。默认情况下，font-height类似于12 px，因此除法的高度将自动至少为12px高，或者无论页面的默认字体高度如何。尝试在课堂上设置font-size: 1px;，看看它是否摆脱了身高问题。

Answer 2

IE6将浮动元素的边距加倍。你可以通过使用IE6特定的CSS来解决这个问题

<!--[if IE 6]><link href="ie6.css" rel="stylesheet" type="text/css" /><![endif]-->

并使margin-top与原始CSS中的值完全相同（即8px）。

IE6 - 在h3上方出现太多间距，我该如何摆脱它？

2 个答案: