ТЕКСТОВЫЕ ОБЛАСТИ прокручивают собой (на IE8) каждый раз, когда Вы вводите один символ
IE8 имеет известную ошибку (на connect.microsoft.com), где ввод или вставка текста в элемент ТЕКСТОВОЙ ОБЛАСТИ заставят текстовую область прокручивать отдельно. Это является чрезвычайно раздражающим и обнаруживается во многих сайтах сообщества, включая Википедию. Репродукция - это:
- откройте HTML ниже с IE8 (или используйте любую длинную страницу на Википедию, которая покажет ту же проблему, пока они не зафиксируют его),
- измерьте полный экран браузера
- вставьте несколько страниц текста в ТЕКСТОВУЮ ОБЛАСТЬ
- переместите полосу прокрутки в среднее положение
- теперь введите один символ в текстовую область
Ожидаемый: ничего не происходит Фактическое: прокрутка происходит самостоятельно, и точка вставки заканчивается около нижней части текстовой области!
Ниже репродукция HTML (может также видеть, что это живет на сети здесь: http://en.wikipedia.org/w/index.php?title=Text_box&action=edit)
Я знаю, что могу избежать этого путем принуждения веб-сайта в режим эмуляции 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>
Я также видел обходной путь в Интернете , чтобы использовать непроцентную ширину , а затем процентную максимальную ширину и минимальную ширину. , но это было гораздо менее действенным, чем другой обходной путь, описанный выше (любезно предоставлен Росс ), который, похоже, работает во всех браузерах, включая IE6.
подробнее: После часа исследования проблема, похоже, вызвана обработкой IE8 конфликта между атрибутом «COLS» и стилем «width» в элементе textarea. Если ширина CSS шире, чем ширина по умолчанию (ширина шрифта x столбцы), IE8 запутается, когда вы добавляете текст и прокручиваете текстовое поле. Если вместо этого ширина CSS меньше ширины по умолчанию, полученной из атрибута cols, тогда все работает нормально.
Тонкая зависимость между столбцами и шириной, возможно, делает проблему настолько сложной для воспроизведения, потому что одна и та же страница может сломаться или не сломаться в зависимости от отношения столбцов к ширине. HTML в quesiton фактически воспроизводит ошибку в большом окне браузера и не воспроизводит ошибку в маленьком!