Problem mixing line-height, vertical-align, and li in IE

What it looks like:

  • Usingsuper span class

    the line below

    • The red border is around the h3 tag for the whole line. In IE, it's as though the box goes up (with the superscript) and never comes down.

    Success! Thierry to the rescue!

    He said: "You need to help IE by giving the parent a layout. Try

    h3 {zoom:1;}

    And it worked!

  • Usingsuper span class

    the line below

    • css:

    body {
	line-height:1.125em;
	margin: 0;	padding: 0;
	font-size:1.1em;
	margin-left: 100px;
	}
li, li h3 {line-height:normal;}
h3 {
	font-size:1.2em;
	margin-bottom: 0;
	line-height:normal;
	border: 1px solid red;
	}
h3 .super {	
	vertical-align:super;		
	}
h5 {
	font-weight:normal;
	font-size: .8em;
	color:green;
	margin: 0; padding: 0;
	}
li, li h3 {line-height:normal;}

    html:

    <li>
<h3>Using<span class="super">super</span> span class</h3>
<h5>the line below</h5>
</li>