Различия в высоте входа в Firefox и Chrome

Почему высота в 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;
}

Ответы

Ответ 1

Проблема в основном line-height.

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

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

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

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

Ответ 2

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

Ответ 3

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

Ответ 4

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

Ответ 5

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

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

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

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

Ответ 6

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

height: 20px;
padding: 0;

Ответ 7

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

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