jquery - 在 Internet Explorer 中动态设置高度会转换为高度 : auto

Question

该脚本获取每个 span 元素的高度值并将其应用于其父 li 元素(我编写它是为了解决一些 float /布局问题)。它在 Firefox 和 Chrome 中完美运行:执行后，我检查 html，一切正常。

但是，在 IE 7 和 8 中(没有费心尝试 IE6，管它呢)它无法正常工作。相反，它将所有 li 的高度设置为 auto。

这是我的代码:

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

和 HTML:

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

Answer 1

您是否尝试过使用 height相反？

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

如果您想要包括填充或边距的高度，那么您可以使用 outerHeight :

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