Question

我想在其中实现一个带背景颜色的空div。

<html>
<head>
    <style>
        .dark_green {
            background-color: #00D100;
            width: 20px;
            height: 4px;
        }

    </style>
</head>
<body>
    <div class="dark_green"></div>
</body>
</html>

在IE7 / 8/9下，这个div的高度不是4px，它会自动变为19px;在FF和其他铬合金下是正确的。

有什么建议吗？

Answer 1

这取决于你想要做什么。有一些事情可行：

    .dark_green {
        [...]
        line-height:4px;
    }

或

    .dark_green {
        [...]
        overflow:hidden;
    }

两者都有效。

发生这种情况的原因是因为DIV中的文本（即使它只是空格）的渲染行高为19px。问题浏览器使用该值而不是您设置的值作为不删除文本的后备。告诉您希望文字较小（font-size:4px;），行高较小（line-height:4px;）或要删除的文字（overflow:hidden;）的浏览器应该纠正问题。

我不会在这种情况下使用font-size的原因是：

它只能起作用，因为你在继承的行高应用新的字体大小，所以你也可以设置正确的属性。
某些浏览器的最小字体大小大于4px （在FF上11px，不确定你是否可以在IE中设置它），这意味着如果如果用户的最小设置较大，则修复将无效。

Answer 2

添加doctype作为第一行，例如<!DOCTYPE html>，以转义quirks mode。这是一件很重要的事情，或者你会遇到无穷无尽的问题。

完成此操作后，您的原始代码将在IE7及更高版本中运行，就像在Firefox / Chrome中一样。

Answer 3

我找到了这个解决方案：

font-size: 4px;

Answer 4

将任何项目添加到要折叠的div，并将该元素的显示设置为none。

如果你的问题div是

<div class="collapseToZero"></div>

添加如下内容：

<span class="nothing"></span>

并为类添加此样式

.nothing{display:none;}

，您生成的HTML将如下所示

<div class="collapseToZero">
   <span class="nothing"></span>
</div>

现在ie ie将使用高度为零而不是字体大小渲染问题div。

Answer 5

另一种方式 - 只是把它扔进混音：添加一个空注释作为divs内容。是的，它添加了额外的标记，但确实有效：

<div><!-- --></div>

IE下的空div高度问题

5 个答案: