IE7-/Win: line-height and super-[sub-]script

In the following test cases there are couples of paragraphs displayed side by side (floated). The second paragraph of each couple contains a sup element in the middle (the first one a simple span.) Different line-height values are used (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 sapiensollicitudin 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 sapiensollicitudin 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 sapiensollicitudin 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 sapiensollicitudin 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

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

In IE7-/Win, under the following conditions:

  1. the line-height is specified (not 'normal')
  2. the presence of the sup element pushes its line below the position that it would have without the sup (this happens if the line-height is not too big)

then the distance between the line with the sup and the next one is reduced, as to recover the extra space needed for the sup. In other words, all the subsequent lines are at the same vertical position as if the sup was not present. It seems that IE7-/Win tries to respect a global height as dictated by the line-height. In standard browsers when the sup creates extra vertical space, all the subsequent lines are spaced normally and so they remain lower than in the case without sup.

This problem is somewhat similar to other problems like IE7-/Win problem with line-height and tall images, and IE7-/Win problem with small line-height and images, but in those cases the line-height is simply ignored on the line with the image, there is no attempt to respect a global height. See in the tests below a comparison of three cases: normal, with sup, with image.

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 sapiensollicitudin 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 sapiensollicitudin 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 sapiensollicitudin 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 sapiensollicitudin 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 sapiensollicitudin 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 sapiensollicitudin 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.

Now two cases with a sub instead of a sup: When the line-height is specified, the sub does not push the next line below its normal position, even if this leads to overlapping.

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 sapiensollicitudin 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 sapiensollicitudin 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 sapiensollicitudin 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 sapiensollicitudin 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