Internet Explorer and the Mysterious Height and Line-Height (or: when a space makes all the difference)
IE seems to have a rendering bug (!) that causes it to incorrectly render the height of any div that has no text in it, no matter where you place it, or even if you’ve declared any kind of line-height at all in your document (and fall back on the browser default of about 1.2em).
Let’s say you want to use a div to display a background-color only (yes, I know a hr should be used properly here, but then I’d have to mess with margin; absolutely positioning a div is a little easier as its shorter CSS-wise). The below CSS will render a giant div, set to about the line-height of its parent (or the browser default):
div.aLine{
width:400px;
height:1px;
line-height:1px;
background-color:black;
}
Yep, perfectly valid code. One would think that would create a one-pixel-high black line. Nope: the line defaults to the line-height of its parent (or the body, or, if no body line-height is set, the browser default). Very odd: one would think that with Internet Explorer’s famous height malfunctions and ability to scale height at will, it would work fine. Luckily, there’s a quick workaround: add a to you div. Voila! There’s the one-pixel-high line, just like you envisioned.
