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

Posted 2023-05-07

【中文标题】使用 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 可能会受到关于不安全脚本的信息栏警告的影响。

【参考方案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://***.com/a/64876916/10554343。