Introduction
Let's have a look at IE's Collapsing Block Box bug... yes, say that 3 times fast. This bug causes IE to collapse a block box containing an inline element to the inline element's height in disregard of the block boxes line-height. This behaviour is a violation of the CSS specs as
in a "block-level [...] element whose content is composed of inline-level elements, 'line-height' specifies the minimal height of line boxes within the element. The minimum height consists of a minimum height above the block's baseline and a minimum depth below it, exactly as if each line box starts with a zero-width inline box with the block's font and line height properties.
Affected Browsers
In IE 5.5 this bug affects all block elements, in IE6/7 all non-list block elements. The bug has been fixed in IE8. Note that standard browsers behave the same way with (x)html transitional doctypes, with the fix below havin no effect.
(more…)