每次输入一个字符时,css – TEXTAREA自己滚动(在IE8上)

IE8有一个已知的错误(每 connect.microsoft.com),其中将文本输入或粘贴到TEXTAREA元素中将导致文本区域自身滚动.这是非常烦人的,并显示在许多社区网站,包括维基百科.这是可以的：

>使用IE8打开下面的HTML(或使用维基百科上的任何长页面,这将展现相同的问题,直到解决它)
>浏览器的全屏尺寸
>将几页文本粘贴到TEXTAREA中
>将滚动条移动到中间位置
>现在在textarea中输入一个字符

预期：没有任何反应
实际：滚动发生在自己的位置,插入点最后靠近文本区域的底部！

以下是重申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兼容模式来避免这种情况,但是在尽可能少的副作用的情况下,最好的其他方法可以解决这个bug.

解决方法

我最终浪费了很多时间试图弄清楚自己的答案,所以我想我会救他人回答的麻烦.诀窍是为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使用非百分比宽度,然后使用百分比最大宽度和最小宽度,但是比上述其他解决方法(Ross提供的)影响要小得多,这似乎在所有浏览器(包括IE6)上都起作用.

更多细节：经过一个小时的调查,这个问题似乎是由IE8处理textarea元素上的“COLS”属性和“width”风格之间的冲突引起的.如果宽度CSS宽于默认宽度(font width x cols),则IE8会在添加文本并滚动文本区域时感到困惑.如果相反,宽度CSS小于从cols属性导出的默认宽度,则所有工作都可以.

col和width之间的微妙依赖可能是使问题变得复杂的问题,因为根据col和width的比例,相同的精确页面将会断开或不会中断.问题中的HTML实际上是在一个大的浏览器窗口上对这个bug进行了修改,而不是在一个小的页面上进行复制！

原文地址：https://www.jb51.cc/css/217187.html

每次输入一个字符时,css – TEXTAREA自己滚动(在IE8上)

解决方法

相关推荐