Размер окна на входах в firefox скрывает текст

У меня проблема с Firefox при применении -moz-box-sizing : border-box; к входам, кажется, что текст, который я вводил, где-то скрыт или переполнен или что-то в этом роде.

Вы можете увидеть эту проблему здесь: Тест (измените размер вашего окна на размер меньше 980px, потому что это мобильная версия);

Так в чем проблема? Поскольку я пробовал все, что мог найти, и единственное, что сработало, - это удалить свойство -moz-box-sizing : border-box; (:

Ответы

Ответ 1

Вы должны установить высоту на 100%. Я попробовал следующий CSS для ваших полей ввода, и это помогло:

input[type="text"] {
    -moz-box-sizing: border-box;
    font-size: 16px;
    height: 100%;
    padding: 20px;
    width: 100%;
}

== > Причина в том, что ваше дополнение 20px слишком велико. Попробуйте сначала удалить прокладку. Вы увидите, что текст поля ввода становится видимым внезапно;-). После того, как я увидел это, я установил высоту на 100%. Теперь вы можете уменьшить заполнение, например, 10px и все выглядит нормально.

Ответ 2

У меня была эта проблема, но сначала в Safari 6+. Некоторые текстовые входы учитывали верхнюю часть/нижнюю часть, но другие не делали и заканчивали короче. Используя height: 100% для всех из них, как было предложено здесь, все они стали согласованными и, казалось, уважали верхнюю/нижнюю часть. Однако он добавил несколько дополнительных пикселей в высоту.

В конце концов, я закончил делать box-sizing: content-box на всех из них, что сделало их уважительными, дополняя верх/низ, но без дополнительных добавленных пикселей в высоту.

Чтобы преследовать это с помощью width: calc(100% - <padding L+R>), хотя это недостаток.

Ответ 3

Я решил эту проблему по-другому, добавив настраиваемое дополнение для входных текстовых тегов

input[type="text"] {
  padding: 6px 12px 12px 6px;
}

input[type="email"] {
  padding: 6px 12px 12px 6px;
}

input[type="password"] {
  padding: 6px 12px 12px 6px;
}

Ответ 4

input[type="text"] {
padding-top:0;
padding-bottom:0;
vertical-align:middle;
}