IE7-/Win: line-height problem with inline boxes of different font-size

In the following test cases there are couples of paragraphs displayed side by side (floated), with a span in the middle. In the second paragraph of each couple the span element has a bigger font-size (1.7em) and line-height 0.8. Different line-height values are used on the paragraphs (including px expressed ones, usually not recommended, but useful here for testing purposes.)

line-height: 20px

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas nunc nulla, lobortis eu, eleifend eu, venenatis non, massa. Morbi sed wisi a s a p i e n 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.

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.

line-height: 30px

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas nunc nulla, lobortis eu, eleifend eu, venenatis non, massa. Morbi sed wisi a s a p i e n 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.

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.

line-height: 2.0em

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas nunc nulla, lobortis eu, eleifend eu, venenatis non, massa. Morbi sed wisi a s a p i e n 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.

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.

line-height: 1.5em

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas nunc nulla, lobortis eu, eleifend eu, venenatis non, massa. Morbi sed wisi a s a p i e n 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.

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.

line-height: 1.1em

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas nunc nulla, lobortis eu, eleifend eu, venenatis non, massa. Morbi sed wisi a s a p i e n 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.

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.

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 s a p i e n 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.

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.

line-height: 2.0

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas nunc nulla, lobortis eu, eleifend eu, venenatis non, massa. Morbi sed wisi a s a p i e n 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.

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.

line-height: 1.5

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas nunc nulla, lobortis eu, eleifend eu, venenatis non, massa. Morbi sed wisi a s a p i e n 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.

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.

line-height: 1.1

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas nunc nulla, lobortis eu, eleifend eu, venenatis non, massa. Morbi sed wisi a s a p i e n 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.

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.

IE7- has problems with the distance between the line contaning the span and the following one: the distance is sometimes less than expected (when the height of the inline box generated by the inner span is such that it moves down the baseline it is aligned to).

This problem is somewhat similar to other problems like IE7-/Win problem with line-height and tall images, IE7-/Win problem with small line-height and images, vertical align of tall images.

The next block is just to check the text metric for the 1.7em/0.8 combination used in the above spans.

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.

CSS tests home