Kích thước hộp trên đầu vào trong firefox giấu văn bản

Question

Tôi gặp sự cố với Firefox khi áp dụng -moz-box-sizing : border-box; cho đầu vào, có vẻ như văn bản tôi nhập vào ở đâu đó bị ẩn hoặc bị tràn hoặc thứ gì đó.

Bạn có thể thấy sự cố tại đây: Test (đổi kích thước cửa sổ của bạn thành kích thước nhỏ hơn 980px vì đây là phiên bản dành cho thiết bị di động);

Vậy vấn đề có thể là gì? Bởi vì tôi đã thử mọi thứ tôi có thể tìm thấy và điều duy nhất hoạt động là xóa thuộc tính -moz-box-sizing : border-box; (:

Answer 1

Bạn nên đặt chiều cao thành 100%. Tôi đã thử CSS sau cho các trường nhập của bạn và nó đã giúp:

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

==> Lý do là, padding 20px của bạn quá nhiều. Hãy thử loại bỏ phần đệm đầu tiên.Bạn sẽ thấy văn bản của trường nhập được hiển thị đột ngột ;-). Sau khi tôi thấy điều này, tôi đặt chiều cao lên 100%. Bây giờ bạn có thể giảm phần đệm xuống, ví dụ: 10px và mọi thứ đều ổn.

Answer 2

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

Answer 3

Tôi gặp sự cố này nhưng ban đầu ở Safari 6+. Một số văn bản đầu vào đệm được tôn trọng trên/dưới, nhưng những văn bản khác thì không và kết thúc ngắn hơn. Bằng cách sử dụng height: 100% trên tất cả chúng như được đề xuất ở đây, tất cả chúng đều trở nên nhất quán và dường như tôn trọng đệm trên/dưới. Tuy nhiên, nó đã thêm một vài điểm ảnh chiều cao.

Cuối cùng, tôi đã thực hiện box-sizing: content-box trên tất cả chúng, làm cho chúng tôn trọng đệm trên cùng/dưới cùng nhưng không có chiều cao thêm pixel.

Mặc dù phải theo đuổi điều này với một số width: calc(100% - <padding L+R>), đây là một bất lợi.

Answer 4

tôi giải quyết vấn đề này khác nhau bằng cách thêm một lớp đệm tùy chỉnh cho các thẻ nhập văn bản

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

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

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