Блокировка элементов ввода в Firefox

Question

Я пытаюсь заблокировать элемент CSS с двух сторон контейнера. Следующий CSS работает для таких элементов, как div, но не для элементов ввода в Firefox

слева: 20 пикселей; справа: 20 пикселей; верх: 20 пикселей; высота: 20 пикселей; ширина: авто; положение: абсолютное;

Я обнаружил, что могу обернуть элемент в DIV, но на самом деле это не вариант, так как это очень непрактично в моей ситуации.

Answer 1

Причина, по которой width: auto не работает для input s в Mozilla, заключается в том, что они имеют внутреннюю ширину, которая задается атрибутом size, по умолчанию 20, когда атрибут не объявлен.

Я не вижу простого способа обойти это. Обычный кросс-браузерный совместимый способ - это div-обертка с полем, в котором ширина div устанавливается равной 100% внутри. Это необходимо и для IE6, который не поддерживает абсолютное позиционирование кромок (установка слева и справа, но не ширины, или верха и низа, но не высоты) для любого элемента.

Answer 2

Вы пробовали следующее?

width: 100%

Согласно w3schools , оно должно расшириться до содержания элемента.