Высота установки Firefox/Safari как [заданная высота - дополняющий - граница] для входа [type=button]

Когда я использую следующий 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

У кого-либо есть какая-либо идея, почему это происходит?

(Даже если это ожидало поведение, какова логика позади него?)

9
задан Douwe Maan 14 February 2010 в 11:12
поделиться

3 ответа

Элементы формы традиционно имеют 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.

27
ответ дан 4 December 2019 в 07:47
поделиться

Вот несколько вещей, которые вы можете попробовать:

1
ответ дан 4 December 2019 в 07:47
поделиться

Это имеет смысл, потому что высота элемента, естественно, больше, чем вы установили. элементам ввода назначается высота, которой в этом случае должно быть достаточно, чтобы вместить текст вашего элемента, но вы устанавливаете меньшее значение. Чтобы показать это, удалите настройку высоты.

0
ответ дан 4 December 2019 в 07:47
поделиться