Нужно переопределить Firefox и Chrome для линейной высоты: нормальный! Important

Question

Итак, я потратил большую часть этой прошлой недели на то, что хром любит «минимальную блокировку» линии-высоты, чтобы соответствовать шрифт на формах. Более конкретно, текстовые, парольные и почтовые входы. Из-за чего я очень старался переопределить.

Что я подразумеваю под «минимальной блокировкой», так это то, что для моего шрифта для работы над темой, которую я создал, она должна быть 40 пикселей. Так что строка-высота, чтобы она выглядела хорошо, должна быть установлена ​​равной 28px. Но, я думаю, его переопределение до 41px. Теперь я могу настроить высоту строки выше 41px, и она будет влиять на стиль, но не меньше.

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

* дней *

После наконец-то, чтобы это выглядело несколько отношение к теме, я решил начать отладку Firefox.

* flips desk ... плачет над сломанной техникой ... T.T ... buysNewComputerOpensBoxSetup! ... flips desk again *

Не снова! Только на этот раз кнопка отправки делает то же самое. Кроме того, что его «блокировка» высоты линии на кнопке на шрифт. Это полностью закручивает поток и выглядит странно. Для некоторых из вас, которые могут быть не очень важны, но, считайте меня OCD, потому что он должен работать, или я откажусь от него и попробую все.

---

Представляю вам, пример. Перейдите на веб-сайт ниже, используя либо firefox, либо chrome, и направьте свое внимание на форму входа в верхнем правом углу. Поля текста и пароля в хром. И кнопка отправки в firefox.

Если вы все еще потеряли, не стесняйтесь редактировать форму входа в систему css с помощью инспекторов и попробуйте выполнить описанные выше действия.

(Edit. Ссылка Удалены - Сайт изменил смысл тогда)

Это изображение именно то, что я ищу. (Имейте в виду, что это было вынесено в краске, а не в браузере)

---

Это изображение является то, что Chrome делает для этого. Это очень приемлемо.

---

Это изображение является то, что Firefox делает для этого. Firefox, вероятно, выполняет обе проблемы. Кнопка неприемлема.

---

Надеюсь, некоторые хорошо знания люди могут пролить некоторый свет на этот вопрос. ... Если нет, по крайней мере, я знаю, где мое полотенце.

---

Edit: Имейте в виду его в 4 раза по всей теме. Поэтому некоторые стили должны были быть установлены на нечетные числа, чтобы исправить это. Вы увидите, что я имею в виду, когда вы смотрите на него.

Кроме того, я хотел бы иметь чистое решение CSS/HTML. Но, соглашайтесь на javaScript, если их не существует.

Answer 1

Я нашел: http://www.cssnewbie.com/input-button-line-height-bug/#.UwdzJfl_soI

Из статьи:

В основном, Firefox имеет настройки высоты строки для «нормальной» на кнопках и исполнение этого решения с !important декларация.

И при попытке обойти это правило, я обнаружил кое-что делает ситуацию немного более плачевными: браузер определенные важные правила не могут быть чрезмерно управлялась автором определены важные правила!. Это правило не может быть отменено с помощью CSS-файла, встроенного стиля - всего.

Это определенно связано с проблемой, которую я вижу в Firefox.

Единственное, что я могу придумать, это создать div вместо того, чтобы удерживать текст «Войти», а затем скрытую кнопку отправки, которая запускается при нажатии кнопки кнопки.

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

EDIT: Вот jsFiddle на примере: http://jsfiddle.net/F74rf/