У меня проблема с высотой css в Firefox.

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

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

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

1
Artur Keyan 29 Авг 2011 в 12:38

6 ответов

Лучший ответ

Заполнение - это «поле», которое находится внутри поля. Маржа находится вне поля.

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

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

2
yosh 29 Авг 2011 в 08:48

Отступы для кнопок (и большинства полей формы) работают по-разному. Отступы включаются в ширину и высоту (кроме случаев, когда ширина является динамической (т. Е. По умолчанию для кнопок), тогда отступы добавляются к ширине).

Я только что протестировал это в Firefox, IE, Chrome и Opera, и он одинаков во всех.

Единственное отличие состоит в том, что Opera немного по-другому реагирует, когда высота становится слишком маленькой для текста, то есть центрирует его по вертикали вместо того, чтобы размещать его ниже верхнего отступа.

2
Guffa 29 Авг 2011 в 08:59

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

0
Hedde van der Heide 29 Авг 2011 в 08:42

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

0
iMysak 29 Авг 2011 в 08:49

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

input[type=submit] {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}
0
Ionuț G. Stan 29 Авг 2011 в 08:53

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

0
Boris Zbarsky 29 Авг 2011 в 16:54