Это ошибка Opera? - PullRequest
Новая
       10

Это ошибка Opera?

2 голосов
/ 10 сентября 2011

Это ошибка Opera?Пожалуйста, сравните этот jsfiddle jsfiddle.net / n5hBf / 1 с этим jsfiddle.net / n5hBf / 2 Вы должны увидеть разницу в высоте.Эти два jsfiddles одинаковы, за исключением первого, в котором я устанавливаю стили в одном операторе, а во втором jsfiddle я устанавливаю их один за другим.Это хорошо работает в других браузерах, но не в Opera, поэтому вам определенно понадобится последняя версия Opera, чтобы понять, о чем я говорю.

РЕДАКТИРОВАТЬ:

Хорошо,теперь я думаю, что это на самом деле не ошибка, а то, как в Opera обрабатывается перенос слов.Он отличается от того, как он работает в других браузерах, таких как FF, Chrome и IE.Если вы добавите word-wrap: break-word; к элементу textarea, вы поймете, что я имею в виду: http://jsfiddle.net/n5hBf/5/

РЕДАКТИРОВАТЬ 2:

Проблема: * 1020Скажем, если у нас есть элемент textarea, который имеет размер 100x100 и содержит слишком много текста, чтобы поместиться внутри элемента textarea, текст будет переполнен, в результате чего появятся полосы прокрутки.

Цель: В двух jsfiddles я пытался расширить элемент textarea до размера, который достаточно велик для размещения содержимого без использования полос прокрутки.

Неправильное решение: Первый jsfiddle плохо себя вел в Opera, поскольку он увеличивал высоту слишком сильно, чем нужно.Второй jsfiddle хорошо работал в Opera (это означает, что он изменил свой размер в соответствии с фактическими размерами, необходимыми для содержимого; не очень, не меньше), хотя результат в Opera отличался от того, что я мог наблюдать в других браузерах.В других браузерах изменилась только высота.Результат был более широким в Opera, поскольку он изменил ширину и высоту.

Понимание: Как я выяснил, по умолчанию Opera не разбивает длинные слова на строки, а вместо этого добавляет горизонтальполоса прокрутки.В то время как другие браузеры разбивают их на строки.Кроме того, браузеры отображают его так, что прокрутка добавляется только для тех длинных слов, в то время как остальная часть контента занимает ту же ширину ... И тогда я получил подсказку!

Правильное решение: Я понял, что фактические размеры содержимого были определены в соответствии с исходным размером текстовой области, поэтому одно из измерений оказалось недействительным, как только мы изменили другое.То есть, если мы изменим ширину, высота больше не актуальна, потому что содержимое распространяется по новой ширине, уменьшая высоту.Это объясняет, почему второй jsfiddle работал должным образом: сначала я получил новую ширину и применил ее, затем содержимое заняло новые измерения, и только после этого я получил новую высоту и применил ее.Таким образом, если нам нужно изменить ширину и высоту, нам нужно сначала изменить ширину и только потом изменять высоту.В других браузерах, кроме Opera, нужно было изменить только одно измерение, поэтому не было разницы, были ли стили изменены в одном операторе, как в первом jsfiddle, или они были изменены в двух инструкциях, как во втором jsfiddle.

1 Ответ

2 голосов
/ 13 сентября 2011

Единственная причина, по которой он ломается в Opera, заключается в том, что это единственный браузер, который не использует word-wrap: break-word по умолчанию в textareas.Так что это не ошибка, а просто результат другого стиля по умолчанию.

Если вы добавите word-wrap: normal к текстовой области CSS в скрипте , то в другом случае она будет так же ломатьсябраузеры (кроме IE, где он ломается по-другому).

Без word-wrap: break-word ширина отличается от scrollWidth, что означает, что ее изменение повлияет на scrollHeight.

Однако, делая это 

$textarea.css({ 
  width: $textarea[0].scrollWidth, 
  height: $textarea[0].scrollHeight 
});

, оба значения scrollWidth и scrollHeight оцениваются в первую очередь, прежде чем они фактически установлены.Это означает, что это изменение в scrollHeight, вызванное изменением ширины, не принимается во внимание.

Установка ширины и высоты в отдельных операторах .css() одна за другой будет означать scrollHeight будет обновлено до того, как будет установлено.

...