jquery - 使用 jQuery 为什么 IE/Chrome 最初会为文本区域提供不正确的 clientHeight 和 scrollHeight？

Question

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

我通过 CSS 固定/绝对定位设置文本区域的位置和大小。然后我通过 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. 在文本区域初始化之前添加一个短暂的延迟(短至 2 毫秒)。
4. 从服务器在 IE 中加载应用程序(相对于从本地计算机打开)

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

注意事项:

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

Answer 1

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

上获取 clientHeight

它对我有用!