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:
- open the HTML below with IE8 (or use any long page on wikipedia which will exhibit the same problem until they fix it)
- size the browser full-screen
- paste a few pages of text into the TEXTAREA
- move the scrollbar to the middle position
- now type one character into the textarea
Expected: nothing happens Actual: scrolling happens on its own, and the insertion point ends up near the bottom of the textarea!
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>
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?
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>
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.
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.
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!
I think the best way to describe this bug is that if you set a width for the textarea using CSS, and this width is too different from what the COLS field would render, IE8 shows the weird problem, with the skipping scroll bar.
So, if you have cols="10" and textarea { width: 600px; }, the problem will show up because IE8 will use the width calculated by the COLS attribute for the scrolling, instead of the CSS one that's overriding the dimensions.
I just wanted to say thank you because my reputation is not 50 yet, but I had to say something I have spent 4 days on this issue. Please note this also works for an asp.net textbox with multiline enabled. I am not kidding I spent 4 LONG 8 hour days on this and now with your post you really helped resolve this MEGA BUG...
<asp:TextBox runat="server" TextMode="MultiLine" ID="tbxMyTextBox" ClientIDMode="static" Width="100%" Rows="4" Height="75px" MaxLength="5000" Columns="5000" TabIndex="3"></asp:TextBox>
Thank you so much.
来源：https://stackoverflow.com/questions/2933320/textareas-scroll-by-themselves-on-ie8-every-time-you-type-one-character