Почему Firefox отключает текст в моем <input type = "text" /">?

У меня есть простой <input type="text"/> стиль:

font-size:1.5em;line-height:1.5em;padding:.6em .4em;

Он отображается нормально в браузере Chrome, Safari (т.е. в браузере Webkit).

Однако мы приходим к Firefox, и это происходит:

Как вы можете видеть, Firefox решает обрезать размер шрифта на определенной высоте. Почему это происходит? Эта проблема возникает, даже если я удаляю прокладку из <input>.

Примечание:

Это может помочь узнать, что дополнительные стили, применяемые к этому вводу, являются стилями по умолчанию, используемыми в Twitter Bootstrap v.2.0.

Здесь JSFiddle, с конкретной проблемой, которую я описываю:

http://jsfiddle.net/xxepX/

Ответы

Ответ 1

Попробуйте увеличить свойство высоты строки. Это ограничило бы видимую область букв, вызывающих их отсечение. Механизм рендеринга Firefox делает высоту линии немного отличающейся.

Ответ 2

Это помогло мне в аналогичном случае:

input.with-fancy-styling {
    box-sizing: content-box;
}

Ответ 3

У меня тоже была эта проблема, и я хотел поделиться своим исправлением.

Во-первых, убедитесь, что у вас есть надлежащее объявление doctype, например:

<!DOCTYPE html> <html lang="en">

Даже при этом я получал незначительную обрезку нижнего регистра j, g и y.

Я проверил и нашел этот стиль в классе .form-control:

.form-control {
    /* other styles omitted for brevity */
    height: 30px;
    padding: 6px 12px;
}

Поскольку он использует размер ячейки border-box, и мне не нужен более высокий ящик, я просто перезаписал стиль в моей собственной таблице стилей и уменьшил заполнение:

.form-control {
    padding: 5px 12px;
}

И он решил проблему.

Ответ 4

Привет, вам не нужно определять высоту класса входных тегов или задавать высоту: auto; в классе входных тегов

или посмотреть живое демо: -

http://jsfiddle.net/xxep X/2/

ОБНОВЛЕНО

пожалуйста, проверьте обновленный css, я добавил строку-высоту и высоту в вашем CSS и удалил прокладку.

.huge-form input, .huge-form button{
    font-size:1.5em;padding:0;
    line-height:31px;
    height:31px;
}

или вы можете увидеть живое демо: - http://jsfiddle.net/xxepX/5/

Ответ 5

Я тоже попробовал метод увеличения "line-height". Но это делает текст слишком длинным по высоте. Замена "line-height" на "height" решила мою проблему в FF и chrome, не делая ее слишком длинной по высоте.