K-U-H-N.net

Introduction

This is a bug that causes IE to ignore line-height settings on a block element containing an inline element with layout.

Affected Browsers

The bug affects IE6 and IE5.5 for all and IE7 for sub-normal line-heights. The bug has been fixed in IE8.

Conventions

In the context of this article the terms block element and inline element refer to elements with the CSS property display set to block/inline (explicitly or by browser preset) and not block or inline elements as referred to in html. (E.g. in this article and in CSS a list-item can be an inline or a block element while in html it is always a block element.) Unless indicated otherwise a div is always a block element, spans and images are inline elements.

Elements with layout are colored blue, elements without layout are colored pink. Images always have layout.

Road Blocks

There are two IE bugs that interfere with studying the ignored line height bug: The IE collapsing block box bug and, when working with lists, the IE unspecified line-height bug (LINK). To fix both we will apply the white space fix where necessary.

Example

First, we need a block element containing an inline element with layout, e.g. a div containing an image. Let's give the div a rather big font-size for illustration purposes and apply a sub-normal line-height to the div (Fig. 1)... or the default normal one (Fig. 2)... or a really big one (Fig. 3).

IE disregards the line-height setting for the div and instead resorts to the default line-height for the font (and font-size) defined in the div. The extend of he damage done by the bug depends on the IE version you are viewing this page in. In IE6 and below all renderings look the same, while IE7 only ignores the sub-normal line-height. If you want to see what this should look like, you can view this page in FF or Opera or have a look at this FF screenshot

A closer look

Layout... really?

In Order to prove this is a layout related problem, let's replace the image with a span and see the effects of adding (Fig. 4) and removing layout (Fig. 5).

The line-height setting for the div containing the span with layout is being ignored while the div containing the non-layout span is rendered correctly.

A whiter shade of pale

There is one situation when even IE7 ignores all line-height settings regardless of whether they are above or below the default line-height. Admittedly, this is all caused by IE's buggy rendering of empty divs, but given the absence of conformity with the specs one might strive for consistency in IE.

The below examples all have the same above-normal line-height setting; the "expected" outcome (minus the glyph) can be seen in (Fig. 6). If an empty block element has layout all line-height settings are being ignored (Fig. 7). When we give layout to the block element's container and there is no background (color or image) specified for the block element the line-height is being recognized correctly (Fig. 8), but as soon as we add a background to the block element (Fig. 9) the line-height is being ignored again.

This behavior can be found in IE7 and below except that IE5.5 cannot be persuaded to recognize the line-height by adding layout to the container.

Well, so much for consistency...

Ignorance is bliss

If you think ignoring the line-height is bad, have a look at the below rendering of a span without layout in a div with a (recognized) line-height of 0.5.

Well... I'll leave that for another day...