chèn đầu vào cắt văn bản trong firefox

Question

Trong firefox khi tôi sử dụng phần tử đầu vào điều khiển biểu mẫu khởi động, nếu tôi pad phần tử đầu vào, nó cắt văn bản bằng cách đệm vào bên trong thay vì xung quanh văn bản. Nó chỉ có vẻ có hiệu ứng này trong firefox. jsfiddle này chứng tỏ vấn đề:

http://jsfiddle.net/v76xB/

Mẫu đầu vào html:

<input id="name" type="text" class="form-control join-form" placeholder="Enter a Username"> 

CSS:

.join-form { 
    padding: 24px; /*comment this out to see effect of padding */ 
    margin: 12px 0px; 
    font-size: 16px; 
    letter-spacing: 0px; 
    font-weight: 300; 
} 

Đây là khoảng càng cụ thể như tôi có thể nhận được để tái tạo lỗi này. Tôi cũng một nửa hy vọng nó chỉ là một trình duyệt quirk liên quan hoàn toàn với tôi, nhưng tôi không thể kiểm tra được như tôi đang làm việc cá nhân và chỉ có một máy.

Answer 1

Các Bootstrap hình thức kiểm soát lớp học được một chiều cao cố định theo mặc định. Chỉ cần thêm một height: auto; để .join-form chọn của bạn (để giữ cho linh hoạt), và thay đổi đệm để có được hiệu quả ban đầu, như thế này padding: 14px 20px;

Xem ở đây: http://jsfiddle.net/x78Bh/

Answer 2

Thêm thuộc tính độ cao rồi áp dụng phần đệm như bên dưới. Bây giờ bạn có thể thấy cả firefox và chrome sẽ hoạt động giống nhau.

.join-form { 
padding: 20px; /*comment this out to see effect of padding */ 
margin: 12px 0px; 
font-size: 16px; 
letter-spacing: 0px; 
font-weight: 300; 
height:60px; 
} 

DEMO