javascript - IE 报告页面加载后添加的内容不正确 .height()

Question

我正在实现无限滚动，这意味着我正在将内容 block 附加到 DOM 中(通过 jquery 和 javascript)。

为了让用户感觉流畅，我们需要进行一些手动滚动，以将内容窗口保持在“同一位置”，特别是当我们在用户看到的内容前面添加文本时。为了实现这一点(预先添加一个 block ，然后将内容向下滚动我们预先添加的确切数量)，我们需要能够确定我们刚刚添加的内容的高度。这就是 Firefox 和 IE 的不同之处。 Firefox 可以正确处理此问题，并滚动到内容中的正确位置，但当真实值约为 2400px 时，IE 报告的高度约为 600px。

var h1 = $(document).height(); //take the height before appending
$('#textChunks').prepend(newContent); // prepend stuff on top
var h2 = $(document).height();//take the height again...
alert(h2-h1);

警告值在 IE 中始终是错误的(偏差为 3 倍)，并且无论我如何进行测量，它都是一致的(我可以在 DOM 和 IE 中之后测量“newContent”的高度)报告错误，但始终如一)。甚至其他“内置”javascript 函数(例如 .scrollIntoView())在 IE 中似乎也有同样的偏差。

作为完整性检查，我可以在桌面上创建一个包含内容示例的独立 html 文件，在这种情况下它可以工作。因此，问题似乎仅在于页面加载后添加的内容。

Answer 1

答案是怪异模式!

一个很好的引用:http://webdesign.about.com/cs/doctype/a/aaquirksmode.htm

作为快速测试，我更改了本地设置(在 IE 中按 F12，然后将“文档模式”从 Quirks 更改为 IE9 标准)，这解决了我的滚动问题!

如果没有 doctype 声明，IE 默认为怪异模式，这显然会导致它在页面加载后报告添加到 DOM 的元素的高度不正确，这自然会使滚动变得不可靠。另请注意，我正在框架内的框架中工作，因此为我的内容指定 DOCTYPE 的最佳位置是在最外层框架中。