Несоответствие высоты кнопок (кросс-браузер)

Question

У меня проблемы с установкой высоты кнопки. По сути, я не могу иметь кросс-браузер. В Firefox он выше нормальный без какой-либо причины.

Вот скриншот (Firefox, Safari и Opera, в следующем порядке):

А вот и код: http://jsfiddle.net/TMUnS/2/

Я также попытался добавить некоторые конкретные объявления, которые нашел в Интернете, но на самом деле они просто немного уменьшили высоту, но, тем не менее, они не одинаковы (в том же порядке):

А вот и код: http://jsfiddle.net/TMUnS/4/.

Как я мог это исправить?

Answer 1

У Firefox есть эта забавная штука под названием -moz-focus-inner. Я не совсем уверен, для чего это нужно, я просто знаю, что иногда вам нужно сделать это, чтобы заставить кнопки себя вести:

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner {
    padding:0;
    border:0;
}

Это может быть то, что вам нужно. Вы можете увидеть разницу здесь (в Firefox): http://jsfiddle.net/TMUnS/9/

Answer 2

Это набор функций в Firefox, который ограничивает высоту кнопок. Он устанавливает высоту строки по умолчанию для кнопок - http://www.cssnewbie.com/input-button-line-height-bug/. Я бы попробовал использовать фиксированную высоту для кнопок и поиграть с отступом.

Answer 3

Используете ли вы CSS-Reset? Сброс CSS нормализует CSS для браузеров.

Попробуйте сбросить настройки YUI: YUI CSS RESET