jQuery outerHeight返回不正确的值IE

我正在尝试获取页面上元素的高度。我在Mac和FF中获得了期望值（700px左右），但IE8中的值为0。我还没有尝试早期版本的IE。jQuery outerHeight返回不正确的值IE

HTML：

<section> 
    <article> 
    ... 
    </article>

的javascript：

var height = myElement.outerHeight(true);

有一些事情可能被复杂化这一点。

我试图衡量元素紧随其后是动态添加到页面（该元素是添加作为Ajax 请求的结果），
我试图元素测量是一个html5元素（部分）。

我注意到的一件事是插入的html5元素在使用开发人员工具查看时格式不正确。我得到的东西如</article/>。当它加载时页面的一部分看起来很好。

有些事情我已经在试图解决问题的尝试：

我添加CSS应用显示：块到所有的HTML5元素
我添加雷米夏普的“HTML5 使脚本” （http://remysharp.com/2009/01/07/html5-enabling-script/）
我使用
我已经尝试使用所有div代替 HTML5元素
myElement.height()在IE8中返回'auto'的值，而在其他浏览器中，我得到一个像素值。 innerHeight()返回null。

感谢

来源

2010-09-24 smabbott

我注意到的一件事是插入的html5元素在使用开发人员工具查看时格式不正确。我得到像</article/>

这不是糟糕的格式，这是开发人员工具告诉你什么IE DOM的样子。这是IE浏览器无法正确解析HTML5元素，导致元素不在您期望的位置，因此高度和渲染效果不符合您的期望。

会发生什么事是，IE浏览器把未知元素为始终与EMPTY内容模型的元素：元素如<img/>或<br/>从未有密切的标签（需要在XHTML自闭合语法）。所以当IE看到<section>时，它创建并关闭section元素。然后下一个元素<article>在之后来到,<section/>和而不是里面。当IE看到</section>它认为它不是一个紧密标签，而是一个空标签，其名称是/section（当然这是非常无效的，但是当IE关心它时？）。

因此，不包含任何内容的<section/>元素的高度可能为零，并且如果您将背景放在该背景上，该背景将不包含<article/>。

尼克提到的，html5shiv可以通过使用createElement暂时欺骗IE浏览器以为它知道<section>是一个真正的元件固定的这些问题一些。但是，这并不能真正覆盖整个问题，因为当你开始进一步解析操作，比如设置innerHTML时，它会再次出错。下一阶段是尝试用innershiv来解决这个问题;这有一些性能上的缺点，所以确保你只在IE上使用它，并且只在你需要的时候（它不像jQuery的html()接口那样健壮）。

就我个人而言，我并没有看到太多的麻烦。目前，<section/>并不能真正为你带来任何<div class="section">没有的东西。在未来，可能会有一些工具可以对语义做些事情，并且使IE6-8中的网站看起来完全正确无关紧要。但那一天离IMO还有很长的路要走。

来源

2010-09-24 21:33:50 bobince

非常好。 Innershiv会诀窍。也许我很固执，但我真的希望HTML5在这里工作。谢谢。 – smabbott 2010-09-27 15:46:19

非常全面的答案。感谢bobince。 – zlovelady 2011-07-22 23:29:30

IE8只需虽然它试图正确地使它们不支持这些元素......，一些功能将无法正常返回包括尺寸。

这只是支持元素和浏览器的浏览器之间的差异，你可以尝试一些HTML5支持库，比如HTML5 Shiv，这是你最好的选择。

来源

2010-09-24 21:04:43

jQuery outerHeight返回不正确的值IE

回答

相关问题