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进行了修改,而不是在一个小的页面上进行复制！
