Высота CSS: 20px + padding-bottom: 3px = 20px?

Question

У меня проблема css с Firefox.

У меня есть ввод type="submit" на моей странице и height:20px, padding-bottom:3px. Таким образом, firebug показывает, что кнопка имеет height 17px и padding-bottom: 3px, поэтому общая высота равна 20px вместо 23px .

Может кто-нибудь помочь мне выяснить, это проблема Firefox или Firebug?

Вот ссылка http://jsfiddle.net/tKZ5Y/ Вы можете проверить предоставленную кнопку отправки с Firebug

Answer 1

Заполнение - это «поле», включенное в поле . Маржа за пределами поля .

Заполнение внутри <input> будет просто выравнивать текст внутри ввода. Если вы используете padding-top и padding-bottom 10px и text 10px, тогда текст будет в середине контейнера 30px.

Также следует помнить, что Firefox размещает текст внутри отправляемого ввода чуть ниже, чем во всех других браузерах. Хотя есть исправление.

Answer 2

Заполнение работает по-разному для кнопок (и большинства полей формы).Заполнение включается в ширину и высоту (за исключением случаев, когда ширина является динамической (т. Е. Значение по умолчанию для кнопок), тогда добавление отступа добавляется к ширине).* в Firefox, IE, Chrome и Opera, и он одинаков для всех.

Единственное отличие состоит в том, что Opera реагирует немного иначе, когда высота текста становится маленькой для текста, т.е.это ниже верхнего отступа.

Answer 3

<input type="submit"> оформлен как -moz-box-sizing: border-box в таблице стилей UA в Gecko, для веб-сайта. Если вы хотите использовать поведение не по умолчанию, то измените стили размеров окна соответствующим образом.

Answer 4

ППК говорит, что это ошибка .Похоже, что Chrome никак не реагирует, когда я объявляю padding-bottom кнопке, так что ... я не знаю.Думаю, самое важное, что вы можете обойти эту проблему в Firefox и Opera (по крайней мере), используя:

input[type=submit] {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

Answer 5

Это не проблема, это нормальное поведение компонентов ввода

Answer 6

Использовать поле вместо отступа. Заполнение задается внутри поля содержимого элемента увеличивается