ie7 and ie6 inline-height bug

February 11, 2010, by A. U. Crawford

IE7 or below has this bug, where a 1px margin is added to the bottom of the an element, which has inline-height declared.

For instance:

<br /> <div style="height: 20px; line-height: 20px;"><br /> Text<br /> </div><br />`

Here the line height is the same as the height thus vertically centering the text.

I know a lot of people will be like “so what”, but there are times when 1px can make a huge difference. for instance when you have a button with a background image or vertical lists or if you are like me and you want it to just look the way you want it to look.

Well the fix is simple. On the div add “display: inline-block; vertical-align: top”. This fixes it.

Like this:

<br /> <div style="height: 20px; line-height: 20px; display: inline-block; vertical-align: top"><br /> Text<br /> </div><br />`