ТЕКСТАРЫ прокручиваются сами по себе (на IE8) каждый раз, когда вы вводите один символ

IE8 имеет известную ошибку (per connect.microsoft.com), где ввод текста или вставка текста в элемент TEXTAREA приведет к тому, что текстовое поле будет прокручиваться само по себе, Это очень раздражает и появляется на многих сайтах сообщества, включая Википедию. Репродукция:

откройте HTML ниже с IE8 (или используйте любую длинную страницу в википедии, которая будет демонстрировать ту же проблему, пока не исправит ее).
размер полноэкранного браузера.
вставьте несколько страниц текста в 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, но какой лучший способ обойти эту ошибку, вызывая как можно меньше побочных эффектов?

Ответ 1

Я в конечном итоге потратил много времени на то, чтобы самому разобраться в ответе, поэтому я решил, что избавлю других от неприятностей. Хитрость заключается в использовании очень большого значения для атрибута COLS для элемента TEXTAREA. Как этот

<!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>

Я также видел обходной путь в Интернете, чтобы использовать процентный процент width, а затем процент max-width и min-width, но это было гораздо менее эффективно, чем другое обходное решение выше (любезно предоставлено Ross), которое, похоже, работает на всех браузерах, включая IE6.

более подробная информация: после часа, исследуя это, проблема, похоже, вызвана обработкой IE8 конфликта между атрибутом COLS и стилем width в элементе textarea. Если ширина CSS шире ширины по умолчанию (ширина шрифта x cols), IE8 запутывается при добавлении текста и прокручивает текстовую область. Если вместо этого ширина CSS меньше ширины по умолчанию, полученной из атрибута cols, тогда все работает нормально.

Тонкая зависимость между cols и шириной, возможно, делает проблему настолько сложной для воспроизведения, потому что одна и та же самая страница сломается или не разбивается в зависимости от отношения cols к ширине. HTML в quesiton фактически переустанавливает ошибку в большом окне браузера и не воспроизводится на маленьком!

Ответ 2

Я думаю, что лучший способ описать эту ошибку состоит в том, что если вы установите ширину для textarea с помощью CSS, и эта ширина слишком отличается от того, что будет отображать поле COLS, IE8 показывает странную проблему, с прокруткой полосы прокрутки,

Итак, если у вас есть cols = "10" и textarea {width: 600px; }, проблема покажется, потому что IE8 будет использовать ширину, вычисленную атрибутом COLS для прокрутки, вместо CSS, который переопределяет размеры.

Ответ 3

Я просто хотел сказать спасибо, потому что моя репутация еще не 50, но я должен был сказать то, что я провел 4 дня по этому вопросу. Обратите внимание, что это также работает для текстового поля asp.net с многострочной поддержкой. Я не шучу, что я провел 4 ДНЯГО 8-часовых дней на этом, и теперь с вашим сообщением вы действительно помогли решить эту ошибку MEGA...

<asp:TextBox runat="server" TextMode="MultiLine" ID="tbxMyTextBox" ClientIDMode="static" Width="100%" Rows="4" Height="75px" MaxLength="5000"  Columns="5000" TabIndex="3"></asp:TextBox>

Большое вам спасибо.