Wymiarowanie pudełek na wejściach w firefoxie ukrywa tekst

Question

Mam problem z przeglądarką Firefox przy stosowaniu -moz-box-sizing : border-box; do danych wejściowych, wydaje się, że tekst, który wpisuję, jest gdzieś ukryty lub nadobrany lub coś takiego.

Możesz zobaczyć problem tutaj: Test (zmiana rozmiaru okna do rozmiaru mniejszego niż 980px, ponieważ jest to wersja mobilna);

Więc jaki może być problem? Bo próbowałem wszystko udało mi się znaleźć, a jedyną rzeczą, która pracowała usuwa właściwość -moz-box-sizing : border-box; (:.

Answer 1

należy ustawić wysokość do 100% Próbowałem następujące CSS dla swoich polach wejściowych, a to pomogło:

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

==> Powodem jest to, że twoje wypełnienie o wielkości 20 pikseli jest zbyt duże Spróbuj najpierw usunąć wypełnienie, a zobaczysz, że tekst pola wejściowego staje się nagle widoczny ;-). Po tym, jak to zobaczyłem, ustawiłem wysokość na 100%. Teraz możesz zmniejszyć dopełnienie do np. 10px i wszystko wygląda dobrze.

Answer 2

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

Answer 3

Miałem ten problem, ale początkowo w Safari 6+. Niektóre wejścia tekstowe przestrzegały dopełnienia u góry/u dołu, ale inne nie były i kończyły się krócej. Używając wszystkich sugerowanych tutaj height: 100%, wszystkie stały się spójne i wydawały się respektować dopełnienie góry/dołu. Jednak dodał kilka dodatkowych pikseli w wysokości.

Na koniec skończyłem robiąc box-sizing: content-box na wszystkich z nich, co sprawiło, że szanowali padding góra/dół, ale bez dodatkowych dodanych pikseli w wysokości.

Musiałem jednak ścigać to z width: calc(100% - <padding L+R>), co jest wadą.

Answer 4

I rozwiązać ten problem inaczej dodając niestandardowe dopełnienie dla znaczników tekstowych wejście

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

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

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