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

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

9 голосов
/ 14 февраля 2010

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

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

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

Ответы [ 4 ]

27 голосов
/ 14 февраля 2010

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

1 голос
/ 14 февраля 2010

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

0 голосов
/ 30 сентября 2010

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

работал на FF, IE, Safari и Chrome: D

0 голосов
/ 14 февраля 2010

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

...