Разница высоты ввода в Firefox и Chrome

Question

Почему высота в Chrome больше, чем у Firefox ввода

См. Пример здесь http://jsfiddle.net/jitendravyas/89Msh/1/

select, input, textarea, button {
    font: 99% sans-serif;
}

input, select {
    vertical-align: middle;
}

body, select, input, textarea {
    color: #444444;
}

button, input, select, textarea {
    margin: 0;
}


input, textarea {
    font-family: inherit;

    line-height: 1.5;
}


input {
    border: 0 none;
    font-size: 32px;
    line-height: 1.1;
    margin-right: 29px;
    padding: 3px 3px 0;
    width: 206px;
    border-radius: 7px;
}

Answer 1

Проблема, по сути, line-height.

Chrome видит line-height так же, как он видит height, а Firefox - нет.

Добавление высоты к входу должно решить проблему, хотя вы должны быть осторожны, чтобы ваши line-height и height совпадали.

Например: height: 20px; line-height: 20px;.

http://jsfiddle.net/e2agj/1/ - последний пример ввода является правильным.

Answer 2

Просто попробуйте переполнение: скрыто на входе

Answer 3

У меня была та же проблема, и мне пришлось объединить line-height И padding, чтобы все заработало.

Answer 4

Я обычно использую padding вместо высоты для увеличения общей высоты ввода.При этом мне не нужно бороться с различными интерпретациями Chrome и Firefox.

Answer 5

Я столкнулся с одной и той же проблемой высоты строки ввода в браузерах Firefox , Chrome & Opera Поэтому я соединил высоту строки, высоту и размер шрифта для соответствующего вида.

input {                   
        line-height: 45px;
        height: 45px;
        font-size: 45px;
      }

Answer 6

Это должно работать в Chrome и Firefox на выбранных элементах:

height: 20px;
padding: 0;

Answer 7

Я думаю, что это связано с тем, как вы стилизовали font для input.

select, input, textarea, button {
    font: 99% sans-serif;
}

Каждый браузер имеет свой собственный рендеринг для sans-serif, поскольку это на самом деле неfont.

Следовательно, без определенного набора шрифтов можно ожидать некоторые несоответствия.