Почему высота элемента кнопки не совпадает с высотой элемента ввода родственного элемента с такими же свойствами высоты?

Question

У меня есть следующее:

<div    style="border:solid 1px gray; height:22px; line-height:22px; display:inline-block;">Div</div>
<input  style="border:solid 1px gray; height:22px; line-height:22px; vertical-align:top;" type="text">
<button style="border:solid 1px gray; height:22px; line-height:22px; vertical-align:top;">Button</button>

Как вы можете видеть в этом jsFiddle , почему элемент кнопки на 1 пиксель короче, чем остальные? в Chrome и Firefox.

Answer 1

Это связано с тем, как браузер реализует блочную модель для этих элементов.

div и input оба используют content-box где-как button использует border-box

Смотрите здесь для получения дополнительной информации: http://www.quirksmode.org/css/box.html

Вы можете добавить box-sizing: content-box;, -moz-box-sizing: content-box;, -ms-box-sizing: content-box;

в CSS, чтобы заставить его использовать метод расчета размеров для поля содержимого.

Редактировать - Подробнее : Почему Firefox использует блочную модель IE для элементов ввода?