为什么IE / Chrome最初会为textarea提供不正确的clientHeight和scrollHeight？

Question

Chrome（浏览本地文件时的IE）为textarea元素的clientHeight提供了一个初始值，该值不正确。如何让IE和Chrome提供正确的值？（Problem demo'ed here）

我通过CSS固定/绝对定位设置textarea的位置和大小。然后我通过JavaScript / jQuery检查clientHeight的值。

问题不会一直发生，但始终可以重现。具体而言，需要满足以下条件：

1. 使用Chrome（5.0）。 （如果从本地计算机打开文件，也是IE（8.0）。）
2. 浏览器窗口已最大化。
3. jQuery包含内联（与链接作为外部文件）
4. 自浏览器启动以来尚未加载页面。
5. 我的应用尚未处理任何命令。
6. 变量paddingLines是基于clientHeight动态确定的。 （每次设置为50都是一种解决方法。）

我需要准确的clientHeight和scrollHeight值，因为我使用这些属性来确定将textarea scrollHeight“捕捉”到何处，以便最后一个输出从文本区域的第一行开始。实际上，如果属性在调用之间始终不准确，它仍然可以工作。不幸的是，在处理第一个命令时，不准确的属性会调整为正确的值。

我试图在演示版here中找出问题。当我试图制作更简单的样本时，问题并没有像往常一样重现。我认为存在一些时间和/或浏览器优化问题，因为以下解决方法会使问题消失：

1. 每次将变量paddingLines设置为50（而不是基于clientHeight动态计算）
2. 将jQuery包含为外部文件（而不是内联）
3. 在初始化textarea之前添加一个短延迟（短至2毫秒）。
4. 从服务器加载IE中的应用程序（而不是从本地计算机打开）

然而，这些解决方法只是kludges，我宁愿找到问题的真正原因/解决方案。虽然这是一个次要的美学问题，但我希望更深入地了解Html DOM，CSS，Javascript和jQuery如何在不同的浏览器中工作。我的代码有问题吗？

注意：

• Chrome的不准确属性的原因似乎与IE的
不同
• Chrome无法实现的客户端高度似乎是基于浏览器的非最大化尺寸。
• IE的innacurate clientHeight可能会受到有关不安全脚本的信息栏警告的影响。

Answer 1

我有同样的问题。我使用自适应设计得到了错误的clientHeight。 尝试在$(window).load();而不是$(document).ready();

上获取clientHeight

它对我有用！

Answer 2

我从来没有弄清楚根本原因，但我发现了一个可接受的解决方法，它不依赖于暂停一个神奇的毫秒数：

处理resize事件。即使用户未手动调整窗口大小，浏览器第一次打开时也会触发此事件。到目前为止，clientHeight和scrollHeight的值已在所有浏览器中确定。

$(window).resize(function(e) {
    // Called when the browser is first opened.
    // Values of clientHeight and scrollHeight have settled by this point.
});

Answer 3

看看这两个问题的答案。

Getting height and width of body or window of web page

clientHeight returns different values depending on the mode IE8 is in

希望它有所帮助。