gpt4 book ai didi

css - 每次键入一个字符时,TEXTAREA 会自行滚动(在 IE8 上)

转载 作者:技术小花猫 更新时间:2023-10-29 10:20:15 24 4
gpt4 key购买 nike

IE8 有一个已知错误(根据 connect.microsoft.com ),在该错误中将文本键入或粘贴到 TEXTAREA 元素中会导致文本区域自行滚动。这非常烦人,并且出现在许多社区站点中,包括维基百科。重现是这样的:

  1. 用 IE8 打开下面的 HTML(或使用维基百科上的任何长页面,在他们修复之前会出现同样的问题)
  2. 将浏览器调整为全屏
  3. 将几页文本粘贴到 TEXTAREA
  4. 将滚动条移动到中间位置
  5. 现在在文本区输入一个字符

预期:没有任何反应实际情况:滚动会自动发生,插入点最终会靠近文本区域的底部!

下面是 repro HTML(也可以在网上看到这个:http://en.wikipedia.org/w/index.php?title=Text_box&action=edit)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" ><body>
<div style="width: 80%">
<textarea rows="20" cols="80" style="width:100%;" ></textarea>
</div>
</body></html>

我知道我可以通过强制网站进入 IE7 兼容模式来避免这种情况,但是解决此错误同时尽可能减少副作用的最佳其他方法是什么?

最佳答案

我最终浪费了很多时间试图自己找出答案,所以我想我可以省去其他人回答的麻烦。诀窍是为 TEXTAREA 元素上的 COLS 属性使用一个非常大的值。像这样

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" >
<body>
<div style="width: 80%">
<textarea rows="20" cols="5000" style="width:100%;" ></textarea>
</div>
</body>
</html>

我还看到一个 workaround online 使用非百分比 width 然后是百分比 max-widthmin-width,但是比上面的其他解决方法(由 Ross 提供)影响小得多,它似乎适用于包括 IE6 在内的所有浏览器。

更多细节:经过一个小时的调查,问题似乎是由 IE8 处理 textarea 元素上的“COLS”属性和“width”样式之间的冲突引起的。如果宽度 CSS 比默认宽度(字体宽度 x 列)宽,IE8 在您添加文本和滚动文本区域时会感到困惑。相反,如果宽度 CSS 小于从 cols 属性派生的默认宽度,则一切正常。

cols 和 width 之间的微妙依赖性可能是导致问题难以重现的原因,因为根据 cols 与 width 的比率,完全相同的页面可能会中断或不会中断。问题中的 HTML 实际上会在大浏览器窗口上重现错误,而不会在小窗口上重现!

关于css - 每次键入一个字符时,TEXTAREA 会自行滚动(在 IE8 上),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2933320/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com