Dynamically setting height in Internet Explorer translates to height: auto

Question

This script takes the height value of each span element and applies it to its parent li element ( I wrote it to solve some float / layout issues). It works perfectly in Firefox and Chrome: after execution, I check the html and everything has worked alright.

However, in IE 7 and 8 (havent bothered trying with IE6, screw that) it doesnt work properly. Instead, it sets all li's height to auto.

This is my code:

$(".fase ol > li").each(function(index) {
  var li_content_height = $('span', this).css('height');
  $(this).css('height', li_content_height )
});

And the HTML:

<div class="fase">
  <ol>
    <li>
      <span>blablablablabla</span>
    </li>
    <li>
      <span>blablablablabla</span>
    </li>
  </ol>
</div>

Answer 1

Have you tried using height instead?

var li_content_height = $('span').height() + $(this).height();
$(this).css('height', li_content_height);

If you want the height including padding or margin, then you can use outerHeight:

var heightWithPadding = $('span').outerHeight();
var heightWithPaddingAndMargin = $('span').outerHeight(true);