Internet Explorer忽略了CSS中设置的非常小的高度

Question

我的CSS看起来像这样......

.ColorSeparatorArea
{
    background-color: #3d3d77;
    height: 1px;
}

...然后我将该样式应用于DIV元素：

<div class="ColorSeparatorArea"></div>

它在非IE浏览器中工作正常，但在IE中，它将div的高度设置为一行文本的高度，它不会让我更小。任何人都知道如何解决这个问题？

Answer 1

.ColorSeparatorArea
{
    background-color: #3d3d77;
    height: 1px;
    overflow: hidden;
}

Answer 2

这不会更好，更具语义性吗？

<hr />

hr
{
    border: 1px solid #3d3d77;
}

Answer 3

如果高度低于默认的行高，则需要指定行高。

.ColorSeparatorArea
{
    background-color: #3d3d77;
    height: 1px;
    line-height: 1px;
}

Answer 4

同时设置font-size样式：

font-size: 1px;

Answer 5

我记得IE中的间距/分隔符<div>有类似的问题。我发现this page帮助了我。我使用的解决方案是在<div>中添加空注释，即

<div class="ColorSeparatorArea"><!-- --></div>

这似乎很奇怪，但它确实有效。

Answer 6

根据Internet Explorer的版本，它将使用高度，就好像它是最小高度一样，然后增大盒子，感觉就像生长盒子一样。

Answer 7

将非破坏空间（＆amp; nbsp;）粘贴到该div中，将font-size（可能是line-height）设置为1px，它应该没问题。