Internet Explorer ignores really small heights set

问题:

I have CSS that looks like this...

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

... and then I'm applying that style to a DIV element:

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

It works fine in non-IE browsers, but in IE, it sets the height of the div to the height of one line of text and it won't let me go any smaller. Anyone know how to get around this problem?

回答1:

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

回答2:

Wouldn't this work better and be more semantic?

<hr />

.

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

回答3:

You need to specify the line-height if the height is lower than the default line-height.

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

回答4:

Also set the font-size style:

font-size: 1px;

回答5:

I remember having a similar problem with spacing/separator <div>s in IE. I found this page which helped me. The solution I used was to put an empty comment in the <div>, i.e.

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

It seems an odd thing to do, but it works.

回答6:

Depending on the version of Internet Explorer, it will use height as if it is min-height and grow the box however big it feels like growing the box.

回答7:

Stick a non breaking space (& nbsp;) into that div, set the font-size (and possibly line-height) to 1px and it should be fine.