TEXTAREAs自己滚动（在IE8上），每次输入一个字符 [英] TEXTAREAs scroll by themselves (on IE8) every time you type one character
问题描述
IE8有一个已知错误（每 connect.microsoft.com ），其中输入或粘贴文本到TEXTAREA元素将导致textarea本身滚动。这是非常恼人，并在许多社区网站，包括维基百科。重现是这样的：
IE8 has a known bug (per connect.microsoft.com) where typing or pasting text into a TEXTAREA element will cause the textarea to scroll by itself. This is hugely annoying and shows up in many community sites, including Wikipedia. The repro is this:
- 使用IE8打开下面的HTML（或使用维基百科上的任何长页面，
-
-
<
预期： 没有什么发生
实际：滚动发生在自己的，并且插入点结束在textarea的底部附近！
Expected: nothing happens Actual: scrolling happens on its own, and the insertion point ends up near the bottom of the textarea!
下面是重现HTML此网址在这里： http：//en.wikipedia .org / w / index.php？title = Text_box& action = edit ）
Below is repro HTML (can also see this live on the web here: 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兼容模式来避免这种情况，以解决这个问题，同时尽可能减少副作用。
I know I can avoid this by forcing the website into IE7 compatibility mode, but what's the best other way to work around this bug while causing as few side-effects as possible?
推荐答案
我最终浪费了很多时间自己找出答案，所以我想我会救他人的麻烦的回答。诀窍是对TEXTAREA元素的COLS属性使用非常大的值。像这样
I ended up wasting a lot of time trying to figure out the answer myself, so I figured I'd save others the trouble of answering. The trick is to use a very large value for the COLS attribute on the TEXTAREA element. Like this
<!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>
我也看到了在线解决方法使用非百分比宽度 max-width 和 min-width ，但是这比上面的其他解决方法href =http://grantovich.net/posts/2009/06/that-weird-ie8-textarea-bug/#comment-456 =nofollow noreferrer> Ross ）这似乎工作所有浏览器包括IE6。
I also saw a workaround online to use a non-percentage width and then a percentage max-width and min-width, but that was much less impactful than the other workaround above (courtesy of Ross) which seems to work on all browsers including IE6.
更多详细信息：经过一个小时的调查，这个问题似乎是由IE8处理COLS属性和宽度在textarea元素的样式。如果宽度CSS比默认宽度（字体宽度x cols）宽，则当您添加文本和滚动textarea时，IE8会感到困惑。如果宽度CSS小于从cols属性派生的默认宽度，则所有工作都可以。
more details: After an hour investigating this, the problem seems to be caused by IE8's handling of a conflict between "COLS" attribute and "width" style on a textarea element. If the width CSS is wider than the default width (font width x cols), IE8 gets confused when you add text and scrolls the textarea. If, instead, the width CSS is smaller than the default width derived from the cols attribute, then all works OK.
cols和width之间的微妙依赖可能是使问题如此棘手的重现，因为相同的确切页面会破坏或不破坏，取决于cols与宽度。在quesiton中的HTML实际上在一个大的浏览器窗口上重复的bug，不重现一个小的！
The subtle dependence between cols and width is perhaps what makes the problem so tricky to repro, because the same exact page would break or not break depending on the ratio of cols to width. The HTML in the quesiton actually reproes the bug on a large browser window and doesn't repro on a small one!
这篇关于TEXTAREAs自己滚动（在IE8上），每次输入一个字符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
