IE6-/Win: line-height problem with inline images

IE6-/Win does not respect a set line-height in presence of an inline image shorter than that line-height.
In most of the following test cases, only for better demonstration of the problem, the line-height is set using pixels (which is normally not recommended.) The problem occurs independently on this, so even if the line-height is set using ems, numbers, ...

The following paragraph has line-height:40px, no problem.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas nunc nulla, lobortis eu, eleifend eu, venenatis non, massa. Morbi sed wisi a sapien sollicitudin porttitor. Morbi euismod, nibh eu commodo congue, arcu ante euismod ligula, ut laoreet lacus orci sed elit. Pellentesque lorem augue, pretium et, mattis a, pretium eget, leo. Nulla sapien. Integer non risus. Curabitur a sem. Donec non ante. Integer bibendum mauris eget erat.

The following paragraph has line-height:40px, and contains an (inline) img in the middle of the text (a black square.) The line where the img resides does not honor the line-height. Resize/reduce the browser’s width, so that the lines wrap more and differently. All lines are always correctly spaced except the one containing the image. This line is always nearer to the lines above and below it, as if it had a ‘normal’ line-height, instead of the stated (greater) one.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas nunc nulla, lobortis eu, eleifend eu, venenatis non, massa. Morbi sed wisi a sapien sollicitudin porttitor. a simple inline image Morbi euismod, nibh eu commodo congue, arcu ante euismod ligula, ut laoreet lacus orci sed elit. Pellentesque lorem augue, pretium et, mattis a, pretium eget, leo. Nulla sapien. Integer non risus. Curabitur a sem. Donec non ante. Integer bibendum mauris eget erat.

The same problem happens with other replaced content (a checkbox in the following test case), and also with other inline elements having hasLayout.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas nunc nulla, lobortis eu, eleifend eu, venenatis non, massa. Morbi sed wisi a sapien sollicitudin porttitor. Morbi euismod, nibh eu commodo congue, arcu ante euismod ligula, ut laoreet lacus orci sed elit. Pellentesque lorem augue, pretium et, mattis a, pretium eget, leo. Nulla sapien. Integer non risus. Curabitur a sem. Donec non ante. Integer bibendum mauris eget erat.

The following paragraph has line-height:normal.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas nunc nulla, lobortis eu, eleifend eu, venenatis non, massa. Morbi sed wisi a sapien sollicitudin porttitor. Morbi euismod, nibh eu commodo congue, arcu ante euismod ligula, ut laoreet lacus orci sed elit. Pellentesque lorem augue, pretium et, mattis a, pretium eget, leo. Nulla sapien. Integer non risus. Curabitur a sem. Donec non ante. Integer bibendum mauris eget erat.

The following paragraph has line-height:normal, and contains an (inline) img in the middle of the text (a black square.) No problem.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas nunc nulla, lobortis eu, eleifend eu, venenatis non, massa. Morbi sed wisi a sapien sollicitudin porttitor. a simple inline image Morbi euismod, nibh eu commodo congue, arcu ante euismod ligula, ut laoreet lacus orci sed elit. Pellentesque lorem augue, pretium et, mattis a, pretium eget, leo. Nulla sapien. Integer non risus. Curabitur a sem. Donec non ante. Integer bibendum mauris eget erat.

Workarounds? A really weird one: Another image, with height the desired line-height (and width 1px), immediately before and after the ‘real’ image. This ‘opener’ image must be repeated before and after to be sure that one of the two copies is on the same line of the real image, however things wrap. And these ‘opener’ images must be vertically aligned in a suitable way (they are red coloured here for demonstration purpose, but can obviously be made transparent.) Used align=absmiddle in the html, which is not ‘valid’, but gives better results in IE5.0/Win.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas nunc nulla, lobortis eu, eleifend eu, venenatis non, massa. Morbi sed wisi a sapien sollicitudin porttitor. a simple inline image Morbi euismod, nibh eu commodo congue, arcu ante euismod ligula, ut laoreet lacus orci sed elit. Pellentesque lorem augue, pretium et, mattis a, pretium eget, leo. Nulla sapien. Integer non risus. Curabitur a sem. Donec non ante. Integer bibendum mauris eget erat.

... Or an empty inline-block (hasLayout) span, with height the desired line-height, immediately before and after the image (with this solution a vertical alignment problem remains in IE5.0)

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas nunc nulla, lobortis eu, eleifend eu, venenatis non, massa. Morbi sed wisi a sapien sollicitudin porttitor. a simple inline image Morbi euismod, nibh eu commodo congue, arcu ante euismod ligula, ut laoreet lacus orci sed elit. Pellentesque lorem augue, pretium et, mattis a, pretium eget, leo. Nulla sapien. Integer non risus. Curabitur a sem. Donec non ante. Integer bibendum mauris eget erat.

Now a test case with line-height set using a number (3), instead of 40px. Note: the use of a px value for line-height in the previous cases is rather unrealistic, and just for testing purposes. For this same reason I did not consider workarounds consisting in adding fixed px paddings/margins to the image (that would work just in these unrealistic test cases.)

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas nunc nulla, lobortis eu, eleifend eu, venenatis non, massa. Morbi sed wisi a sapien sollicitudin porttitor. a simple inline image Morbi euismod, nibh eu commodo congue, arcu ante euismod ligula, ut laoreet lacus orci sed elit. Pellentesque lorem augue, pretium et, mattis a, pretium eget, leo. Nulla sapien. Integer non risus. Curabitur a sem. Donec non ante. Integer bibendum mauris eget erat.

Same as previous, with the ‘opener’ images.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas nunc nulla, lobortis eu, eleifend eu, venenatis non, massa. Morbi sed wisi a sapien sollicitudin porttitor. a simple inline image Morbi euismod, nibh eu commodo congue, arcu ante euismod ligula, ut laoreet lacus orci sed elit. Pellentesque lorem augue, pretium et, mattis a, pretium eget, leo. Nulla sapien. Integer non risus. Curabitur a sem. Donec non ante. Integer bibendum mauris eget erat.

Of course the problem can be avoided not having the image in the markup, but as a background of a span inside the text, see the following example. But that’s another story: it could be appropriate or not, depending on the ‘semantics’ of the image. (And then it becomes difficult to align the background image to the text baseline, if this is the requirement.)

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas nunc nulla, lobortis eu, eleifend eu, venenatis non, massa. Morbi sed wisi a sapien sollicitudin porttitor.  Morbi euismod, nibh eu commodo congue, arcu ante euismod ligula, ut laoreet lacus orci sed elit. Pellentesque lorem augue, pretium et, mattis a, pretium eget, leo. Nulla sapien. Integer non risus. Curabitur a sem. Donec non ante. Integer bibendum mauris eget erat.

Just for the record, an example where the image is given enough top and bottom margin to get the desired line-height. As said before this is not applicabile unless all is expressed in px (or maybe in em, but this means having a ‘fluid’ image.)

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas nunc nulla, lobortis eu, eleifend eu, venenatis non, massa. Morbi sed wisi a sapien sollicitudin porttitor. a simple inline image Morbi euismod, nibh eu commodo congue, arcu ante euismod ligula, ut laoreet lacus orci sed elit. Pellentesque lorem augue, pretium et, mattis a, pretium eget, leo. Nulla sapien. Integer non risus. Curabitur a sem. Donec non ante. Integer bibendum mauris eget erat.

The problem has been partially fixed in IE7: in the above test cases it doesn’t occur any more. But there are cases when it still occurs:

CSS tests home