Проблема высоты строки Firefox с полями ввода

Question

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

Я обнаружил, что Firefox имеет значение высоты строки по умолчанию, равное 1,2 для полей ввода, которые нельзя изменить. По крайней мере, в OSX нет Windows, поэтому я не могу подтвердить это там.

Я провел несколько экспериментов и тестирований, и просто нет способа изменить значение высоты строки по умолчанию в Firefox. Все остальные браузеры (хорошо, я только что попробовал с Chrome и Safari) отлично выполняют мои требования, но не Firefox.

Кто-нибудь когда-нибудь замечал это, и если да, то нашли ли вы решение для преодоления этого?

Answer 1

К сожалению, высота строки установлена ​​на! Важный в базовом CSS Firefox ... http://hg.mozilla.org/mozilla-central/rev/b97aef275b5e

Answer 2

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

Поскольку Firefox настаивает на использовании !important для объявления line-height, единственный способ, которым я могу спокойно преодолеть эту проблему, это заставить всех других поставщиков использовать line-height: normal для кнопок, а затем использовать отступы для вертикального центрирования текста:

/**
 * Consistently style buttons on anchors, buttons, labels, and submits
 */
.btn {
    .
    .
    .
    height: auto;        // ensure heights on inputs do not affect submit buttons
    line-height: normal; // all browsers use FF's ever unchanging value
    padding: .5em 1em;   // vertically center the text in the button
    .
    .
    .
}

Это работает аналогично для входных данных.

Answer 3

Если ваши кнопки ввода и отправки расположены рядом, при нажатии кнопки примерно на 1 пиксель ниже, чем на входе (похоже, ваше фоновое изображение выключено), просто:

display:inline-block;
vertical-align: top;

в строках кнопокэто прекрасно в FF & IE.

Answer 4

Насколько я знаю из опыта, высота строки на входе не изменится, если вы не измените размер шрифта - чем высота строки изменится на такой же, как font-size + 4px (2 верхних 2 бота Похоже).

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

Answer 5

Line-height нельзя применить к замененным встроенным элементам, таким как кнопки и входы. Это правильное поведение относительно спецификации.

Подробнее см. https://developer.mozilla.org/en/docs/Web/CSS/line-height.

Answer 6

Просто задайте элементу обтекания нужную высоту строки, и по крайней мере все поля ввода type = "text" в Firefox будут иметь ту же высоту строки.Кнопки отправки, похоже, ведут себя по-другому ...

Answer 7

Используйте Height вместо Line-Height. Это работает для меня почти во всех браузерах на Windows7, но я не тестировал его на OSX.