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

Question

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

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

вход заканчивается 2 точек шире DIV как в IE6 и FF3? Что мне не хватает?

EDIT: Как и многие люди, граница является проблемой. Если я устанавливаю границу: 0px на входе, она будет иметь ту же ширину, что и div с границей 0 px (проверяется путем ее обертывания внутри пограничного SPAN).

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

Answer 1

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

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

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

Answer 2

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

Answer 3

ширина входа 10 + 2 раза 1 точки на границу

Answer 4

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