Когда я использую следующий CSS:
input[type=button] {
background-color: white;
border: 1px solid black;
font-size: 15px;
height: 20px;
padding: 7px;
}
с этим HTML:
Я ожидаю видеть это, таким образом, общая высота станет 36px
:
1px border
7px padding
20px content (with 15px text)
7px padding
1px border
Но вместо этого и Firefox 3.6 и Safari 4 показывают это: (Не протестировали в других браузерах),
Снимок экрана http://labs.spiqr.nl/upload/files/1223ef9cbae3ab6e43bd1f9215ebedb157ac7b22.png
1px border
7px padding
4px content (with 15px text) => height - 2 * border - 2 * padding
7px padding
1px border
У кого-либо есть какая-либо идея, почему это происходит?
(Даже если это ожидало поведение, какова логика позади него?)
Элементы формы традиционно имеют width
/height
, которые включают их padding/border, потому что изначально они были реализованы браузерами как виджеты пользовательского интерфейса на базе ОС, где CSS не имеет никакого влияния на оформление.
Чтобы воспроизвести это поведение, Firefox и другие браузеры отображают некоторые поля форм (select, button/input-type-button) со стилем CSS3 box-sizing, установленным на border-box
, так что свойство width
отражает всю ширину отображаемой области, включая границы и подложку.
Вы можете отключить это поведение с помощью:
select, button {
box-sizing: content-box;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
}
(или, что более характерно для макетов жидких форм, где вы хотите использовать ширину '100%', вы можете установить другие свойства в border-box
.)
Приставка -browser должна быть там, чтобы поймать браузеры, которые реализовали это до того, как процесс стандартизации зашел так далеко. Однако это будет неэффективно в IE6-7.
Вот несколько вещей, которые вы можете попробовать:
) display: block
или display: inline -block
Это имеет смысл, потому что высота элемента, естественно, больше, чем вы установили. элементам ввода назначается высота, которой в этом случае должно быть достаточно, чтобы вместить текст вашего элемента, но вы устанавливаете меньшее значение. Чтобы показать это, удалите настройку высоты.