У меня проблема с Firefox при применении -moz-box-sizing : border-box; к входам, кажется, что текст, который я вводил, где-то скрыт или переполнен или что-то в этом роде.
Вы можете увидеть эту проблему здесь: Тест (измените размер вашего окна на размер меньше 980px, потому что это мобильная версия);
Так в чем проблема? Поскольку я пробовал все, что мог найти, и единственное, что сработало, - это удалить свойство -moz-box-sizing : border-box; (:
Вы должны установить высоту на 100%. Я попробовал следующий CSS для ваших полей ввода, и это помогло:
input[type="text"] {
-moz-box-sizing: border-box;
font-size: 16px;
height: 100%;
padding: 20px;
width: 100%;
}
== > Причина в том, что ваше дополнение 20px слишком велико. Попробуйте сначала удалить прокладку. Вы увидите, что текст поля ввода становится видимым внезапно;-). После того, как я увидел это, я установил высоту на 100%. Теперь вы можете уменьшить заполнение, например, 10px и все выглядит нормально.
У меня была эта проблема, но сначала в Safari 6+. Некоторые текстовые входы учитывали верхнюю часть/нижнюю часть, но другие не делали и заканчивали короче. Используя height: 100% для всех из них, как было предложено здесь, все они стали согласованными и, казалось, уважали верхнюю/нижнюю часть. Однако он добавил несколько дополнительных пикселей в высоту.
В конце концов, я закончил делать box-sizing: content-box на всех из них, что сделало их уважительными, дополняя верх/низ, но без дополнительных добавленных пикселей в высоту.
Чтобы преследовать это с помощью width: calc(100% - <padding L+R>), хотя это недостаток.
Я решил эту проблему по-другому, добавив настраиваемое дополнение для входных текстовых тегов
input[type="text"] {
padding: 6px 12px 12px 6px;
}
input[type="email"] {
padding: 6px 12px 12px 6px;
}
input[type="password"] {
padding: 6px 12px 12px 6px;
}
input[type="text"] {
padding-top:0;
padding-bottom:0;
vertical-align:middle;
}