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

IE8有一个已知的错误(每个connect.microsoft.com)，其中在TEXTAREA元素中输入或粘贴文本会导致textarea自身滚动。这非常烦人，并且在许多社区网站(包括Wikipedia)中都显示出来。复制是这样的:

使用IE8打开以下HTML(或在Wikipedia上使用任何长页，直到他们解决该问题，都会出现相同的问题)

大小浏览器全屏

将几页文字粘贴到TEXTAREA

中

将滚动条移到中间位置

现在在文本区域中键入一个字符

预期:没有任何反应
实际:滚动本身发生，并且插入点最终在文本区域的底部附近!

以下是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-width和min-width，但是这比上面的其他变通方法(由Ross提供)的影响要小得多，后者似乎可以在包括IE6的所有浏览器上使用。

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

cols和width之间的细微依赖关系也许是使问题很难重现的原因，因为相同的精确页面会根据cols与width的比例而折断或不折断。问题中的HTML实际上可以在较大的浏览器窗口上还原该错误，而在较小的浏览器窗口上则无法还原该错误!

textArea

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