Об использовании left / top / right / bottom в текстовой области с абсолютным позиционированием

Question

Я попытался установить position:absolute, а затем left, top, right и bottom на фиксированные значения в пикселях, но если я не установил width и height, я не смогу заставить его работать правильно на Firefox 11.

Рендеринг выглядит нормально в Safari / Chrome ... но это ошибка Firefox или что-то, что на самом деле не является стандартным? Использование 100% для width и height иногда является решением, но не тогда, когда элемент не полностью покрывает родительский контейнер.

См. http://jsfiddle.net/EjS7v/6/

Это Chrome (и желаемый результат)

Firefox (ширина / высота до 100%)

Firefox (без ширины / высоты)

Есть ли альтернативы использованию Javascript для вычисления ширины и высоты во время выполнения?

Обратите внимание, что в этом примере я использовал div фиксированного размера в качестве контейнера, но наиболее интересным и полезным является случай, когда контейнер эластичен.

Answer 1

На самом деле есть простая альтернатива, используйте презентационную разметку для содержания этой текстовой области, а затем только 100% ширины для самой текстовой области.

Действительно, CSS очень ограничен.

Answer 2

Это потому, что textarea, в отличие, скажем, от div, имеет ширину и высоту по умолчанию :

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

эффективной ширины текстовой области элемента textarea имеет размер размер × avg + sbw , где size - ширина символа элемента, avg - средняя ширина символа основного шрифта элемента в пикселях CSS, а sbw - ширина полосы прокрутки в пикселях CSS.(Свойство letter-spacing элемента не влияет на результат.)

Если элемент имеет атрибут rows и анализ значения этого атрибута с использованием правил анализа неотрицательных целых чисел не приводит к ошибкезатем пользовательский агент, как ожидается, будет использовать атрибут в качестве подсказки для представления свойства высоты элемента, причем значением является эффективная высота текстовой области (как определено ниже).В противном случае предполагается, что пользовательский агент будет действовать так, как если бы он имел правило таблицы стилей на уровне агента пользователя, устанавливающее для свойства height для элемента значение эффективной высоты текстовой области.

Эффективная высота текстовой области элемента textarea - это высота в пикселях CSS от числа строк, указанных для высоты символа элемента, плюс высота полосы прокрутки в пикселях CSS.