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

【问题标题】：Using jQuery why do IE/Chrome initially give incorrect clientHeight and scrollHeight for a textarea?使用 jQuery 为什么 IE/Chrome 最初会为 textarea 提供不正确的 clientHeight 和 scrollHeight？
【发布时间】：2011-03-23 10:31:21
【问题描述】：

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

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

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

使用 Chrome (5.0)。（如果文件是从本地计算机打开的，也可以使用 IE (8.0)。）
浏览器窗口已最大化。
jQuery 是内联的（相对于作为外部文件链接）
自浏览器启动后该页面尚未加载。
我的应用尚未处理任何命令。
变量 paddingLines 是根据 clientHeight 动态确定的。（每次设置为 50 是一种解决方法。）

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

我已尝试在演示 here 中隔离问题。当我尝试制作一个更简单的示例时，问题并没有始终如一地重现。我认为存在一些时间和/或浏览器优化问题，因为以下解决方法可以解决问题：

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

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

注意事项：

Chrome 属性不准确的原因似乎与 IE 不同
Chrome 不准确的 clientHeight 似乎是基于浏览器未最大化的大小。
IE 不准确的 clientHeight 可能会受到关于不安全脚本的信息栏警告的影响。

【问题讨论】：

标签： jquery google-chrome internet-explorer textarea

【解决方案1】：

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

它对我有用！

【讨论】：

【解决方案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.
});

【讨论】：

【解决方案3】：

看看这两个问题的答案。

Getting height and width of body or window of web page

clientHeight returns different values depending on the mode IE8 is in

希望对你有帮助。

【讨论】：

【解决方案4】：

我正在使用 ReactJS 并且多次遇到此问题。具体来说，在 React 中，setTimeOut 可以解决问题。看到这个答案：https://stackoverflow.com/a/64876916/10554343。

【讨论】：