Ширина типа ввода = текстовый элемент

Почему, когда я делаю это:

<input type="text" style="width: 10px; padding: 2px"/>
<div style="width: 10px; border: solid 1px black; padding: 2px">&nbsp;</div>

ввод оказывается на 2 пикселя шире, чем div как в IE6, так и в FF3? Что мне не хватает?

РЕДАКТИРОВАТЬ: Как уже говорили многие, проблема в границе. Если я установлю border: 0px на входе, он будет иметь ту же ширину, что и div с границей 0 px (подтверждено путем помещения его внутрь SPAN с рамкой).

Однако, когда я измеряю элементы в краске, внутренний блок div имеет размер 14 пикселей, как и ожидалось (10+2+2). Вход, однако, имеет внутреннюю часть 16 пикселей, а затем границу за ее пределами. Почему это? Вероятно, это не ошибка, так как это происходит и в IE6, и в FF3, но я этого не понимаю.


input html css width
person erikkallen    schedule 17.07.2009    source источник

Ответы (4)


arrow_upward
20
arrow_downward

Я считаю, что именно так браузер отображает свой стандартный ввод. Если вы установите границу на входе:

<input type="text" style="width: 10px; padding: 2px; border: 1px solid black"/>
<div style="width: 10px; border: solid 1px black; padding: 2px"> </div>

Тогда оба имеют одинаковую ширину, по крайней мере, в FF.

person pegasus4747    schedule 17.07.2009
comment
Спасибо. Кажется, что на самом деле это граница в 2 пикселя, но визуально она выглядит как 1 пиксель. - person erikkallen; 18.07.2009

arrow_upward
4
arrow_downward

видимая ширина элемента равна width + padding + border + outline, поэтому кажется, что вы забыли о границе элемента ввода. То есть ширина границы по умолчанию для элемента ввода в большинстве (некоторых?) браузеров фактически рассчитывается как 2 пикселя, а не один. Следовательно, ваш ввод выглядит на 2 пикселя шире. Попробуйте явно установить border-width на входе или сделать свой div шире.

person jason    schedule 17.07.2009
comment
Вы имеете в виду маржу, когда говорите «наброски», или это новое понятие, о котором я никогда не слышал? - person erikkallen; 17.07.2009
comment
Прочитайте о структуре здесь: quirksmode.org/css/outline.html. не учитывается в ширине поля, что верно, но меняет видимую ширину. - person jason; 17.07.2009

arrow_upward
0
arrow_downward

ширина ввода 10 + 2 раза по 1 пикселю для границы

person Perica Zivkovic    schedule 17.07.2009

arrow_upward
0
arrow_downward

Я думаю, вы забываете о границе. Граница шириной в один пиксель у Div уменьшит два пикселя общей длины. Поэтому будет казаться, что div на два пикселя короче, чем есть на самом деле.

person Matthew Jones    schedule 17.07.2009
comment
Нет! Ширина + Граница = фактическая ширина! Таким образом, элемент ввода выглядит больше. - person jason; 17.07.2009