jQuery outerHeight返回错误值IE

Question

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

HTML:

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

JavaScript的:

var height = myElement.outerHeight(true);

有许多事情可能使这一点复杂化.

1. 我正在尝试在动态添加到页面后立即测量元素(该元素是作为ajax请求的结果添加的),
2. 我想测量的元素是一个html5元素(部分).

我注意到的一件事是,当使用开发人员工具查看时,插入的html5元素的格式很差.我得到的东西</article/>.加载时页面中的任何内容都很好.

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

1. 我添加了css以将display:block应用于所有html5元素
2. 我添加了Remy Sharp的"html5启用脚本"(http://remysharp.com/2009/01/07/html5-enabling-script/)
3. 我正在使用
4. 我尝试过使用所有div而不是html5元素
5. myElement.height()在IE8中返回'auto'值,而在其他浏览器中我得到一个像素值. innerHeight()回报null.

谢谢

Answer 1

我注意到的一件事是,当使用开发人员工具查看时,插入的html5元素的格式很差.我得到的东西</article/>

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

会发生什么是IE将未知元素视为EMPTY内容模型的元素:元素类似<img/>或<br/>从不具有close-tag(需要XHTML中的自动关闭语法).因此,当IE看到<section>它时,它会创建并关闭一个section元素.那么接下来的元素<article>,来后的<section/>和未里面.当IE看到</section>它认为它不是一个关闭标签,而是一个名称为空的标签/section(当然这是非常无效的,但那时IE是否关心它？).

因此,<section/>元素的高度(不包含任何内容)可能为零,如果您在其上放置背景,则背景将不包含<article/>.

正如Nick所说,html5shiv可以通过暂时欺骗IE认为它知道这是一个真正的元素来解决其中的一些问题.但是,这并没有真正涵盖整个问题,因为当你开始进行进一步的解析操作(如设置)时,它会再次出错.下一阶段是尝试与innershiv解决这个问题 ; 这有一些性能上的缺点,所以请确保你只在IE上使用它,并且只在你需要时(它不像jQuery的界面那样健壮).createElement<section>innerHTMLhtml()

就个人而言,我并没有看到所有这些麻烦的好处.就目前而言,<section/>并没有真正得到任何<div class="section">没有的东西.在未来,可能有一些工具可以对语义做些什么,并且在IE6-8中使网站看起来完全正确无关紧要.但那一天离IMO很远.