Исправление строки в Firefox с полями ввода

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

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

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

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

Ответы

Ответ 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 ever unchanging value
    padding: .5em 1em;   // vertically center the text in the button
    .
    .
    .
}

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

Ответ 3

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

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

Ответ 4

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

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

на кнопке он отлично сочетается с FF и IE.

Ответ 5

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

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

Ответ 6

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

Ответ 7

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