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

IE7-/Win does not respect a set line-height in presence of an inline image.

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 rectangle.) 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 line 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 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 rectangle.) 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.) This fix works in IE5.5, a spacing 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.

... Or an empty inline-block span, with height the desired line-height, immediately before and after the 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.

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.

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.

Related tests:

CSS tests home