Question

我试图获取页面上元素的高度。我在Mac上获得FF和Webkit的预期值（700px左右），但我在IE8中获得的值为0。我还没有尝试过早期版本的IE。

HTML：

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

的javascript：

var height = myElement.outerHeight(true);

有很多事情可能使这一点变得复杂。

我正在尝试测量元素它是动态的添加到页面（元素是添加为ajax的结果请求），
我想测量的元素是一个html5元素（部分）。

我注意到的一件事是，当使用开发人员工具查看时，插入的html5元素格式不正确。我得到像</article/>这样的东西。加载时页面中的任何内容都可以正常显示。

我试图解决问题的一些尝试：

我已添加css申请 display：阻止所有html5元素
我添加了Remy Sharp的“html5” 启用脚本“ （http://remysharp.com/2009/01/07/html5-enabling-script/）
我正在使用
我尝试过使用所有div而不是 html5元素
myElement.height()返回一个值 IE8中的'auto'，而在其他浏览器我得到一个像素值。 innerHeight()返回null。

由于

Answer 1

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

这不是糟糕的格式化，这是开发人员工具告诉你IE DOM的确切含义。 IE无法正确解析HTML5元素，导致元素不在您期望的位置，因此高度和渲染与您期望的不匹配。

IE会将未知元素视为始终是EMPTY内容模型的元素：<img/>或<br/>之类的元素从不具有关闭标记（需要自我...关闭XHTML中的语法）。因此，当IE看到<section>时，它会创建并关闭section元素。然后，下一个元素<article>来自之后的<{em> {<1}}和而不是。当IE看到<section/>时，它认为它不是一个关闭标签，而是一个空标签，其名称是</section>（这当然是非常无效的，但是当IE关心时吗？）。

因此，/section元素的高度（可能不包含任何内容）可能为零，如果您在其上放置背景，则背景不会包含<section/>。

正如尼克所提到的，html5shiv可以通过使用<article/>暂时欺骗IE认为它知道createElement是一个真正的元素来解决这些问题的一些。但是，这并没有真正涵盖整个问题，因为当您开始进行进一步的解析操作（例如设置<section>）时，它会再次出错。下一步是尝试使用innershiv来解决这个问题。这有一些性能上的缺点，所以请确保你只在IE上使用它，并且只在需要时（它不像jQuery的innerHTML接口那样健壮。）

我个人认为并没有太大的好处。目前，html()并没有真正为您提供<section/>没有的任何内容。在未来，可能有一些工具可以对语义做一些事情，并且在IE6-8中使网站看起来完全正确无关紧要。但那一天离IMO很远。

Answer 2

IE8根本不支持这些元素......虽然它试图正确渲染它们，但许多函数都无法正确返回，包括尺寸。

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

jQuery outerHeight返回错误值IE

2 个答案: