Firefox/Safari устанавливает высоту как [указанная высота - отступы - граница] для ввода [тип = кнопка]

Когда я использую следующий CSS:

input[type=button] {
  background-color: white;
  border: 1px solid black;
  font-size: 15px;
  height: 20px;
  padding: 7px;
}

с этим HTML:

<input type="button" value="Foo" />

Я ожидаю увидеть это, поэтому общая высота становится 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

Кто-нибудь знает, почему это происходит?

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


html padding css height
person Douwe Maan    schedule 14.02.2010    source источник
comment
Ссылка на изображение не работает (используйте imgur!)   -  person Camilo Martin    schedule 22.08.2012

Ответы (4)


arrow_upward
27
arrow_downward

Элементы формы традиционно имеют width/height, которые включают их отступы/границу, потому что изначально они были реализованы браузерами как собственные виджеты пользовательского интерфейса ОС, где CSS не влиял на оформление.

Чтобы воспроизвести это поведение, Firefox и другие браузеры отображают некоторые поля формы (выбор, кнопка/тип-кнопки ввода) с помощью 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.

person bobince    schedule 14.02.2010
comment
Большое спасибо! Работает как шарм - person Douwe Maan; 14.02.2010

arrow_upward
1
arrow_downward

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

person Marius    schedule 14.02.2010
comment
Мне помогло изменение DOCTYPE с HTML4 Transitional на HTML5. - person TataBlack; 11.01.2012

arrow_upward
0
arrow_downward

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

person Rob    schedule 14.02.2010
comment
Другие элементы работают так, как я сказал: общая высота равна border-top + padding-top + height + padding-bottom + border-bottom. - person Douwe Maan; 14.02.2010

arrow_upward
0
arrow_downward

Я заработал, удалив отступ кнопки ввода и установив высоту около 20, затем отрегулировав высоту, отступив якорного элемента. Я также установил высоту строки, размер шрифта и семейство шрифтов.

работал на FF, IE, сафари и хроме: D

person Rahatur    schedule 30.09.2010