Sự khác biệt về hình thức đệm trong Firefox và Opera/Chrome/IE

Question

Tôi đang gặp sự cố với phần đệm trong biểu mẫu của tôi trên trang web của mình. Nếu tôi đã đặt chiều cao/chiều rộng thành phần tử biểu mẫu và sau đó thêm phần đệm vào phần tử đó. Trong tất cả các trình duyệt tôi đã thử, ngoại trừ Firefox, phần đệm được thêm vào chiều cao/chiều rộng.

Nếu tôi có đầu vào có chiều rộng là 200 và chiều cao là 20px. và đệm ở 5 (tất cả các cách), tổng và tổng chiều rộng và chiều cao sẽ là 210px và 30px, nhưng trong Firefox là 200px và 20px.

Tôi làm cách nào để giải quyết vấn đề này?

Answer 1

Cho input CSS này:

box-sizing: border-box; 

Bạn có thể đọc thêm về box-sizing trên QuirksMode, the W3C spec, và MDN. Đây là its browser support. Sử dụng các tiền tố -moz- hoặc -webkit- nếu được yêu cầu bởi các trình duyệt mục tiêu của bạn.

---

trước Câu trả lời này đã đề nghị giá trị initial, mà tôi đã tìm thấy bằng cách sử dụng các phím lên/xuống mũi tên trong Web Inspector Chrome. Nhưng hóa ra là initial là từ khóa CSS, áp dụng cho bất kỳ thuộc tính nào, đại diện cho giá trị ban đầu của thuộc tính - giá trị mặc định của trình duyệt. initial kém an toàn hơn việc đặt tên rõ ràng kiểu hộp để sử dụng. Nếu box-sizing: initial được chỉ định và giá trị mặc định của trình duyệt cho box-sizing đã thay đổi, phần đệm của input có thể bị phá vỡ một lần nữa.

Answer 2

Bạn đã thử đặt hiển thị: chặn trên biểu mẫu chưa? Có vẻ như FF có thể sẽ coi nó như một yếu tố nội tuyến.

Answer 3

Cố gắng sử dụng khung CSS như blueprint-css. Hãy xem các trang ví dụ đi kèm với kế hoạch chi tiết (có một tệp có tên là forms.html). Điều này sẽ giải quyết vấn đề đệm của bạn cũng như một loạt các vấn đề khác mà bạn có thể gặp phải.

Answer 4

Hãy thử điều này:

/* Set all margins and paddings to 0 on all browsers */ 

* { 
    margin: 0; 
    padding: 0; 
} 

Answer 5

http://necolas.github.com/normalize.css/

/* 
* 1. Addresses box sizing set to content-box in IE 8/9. 
* 2. Removes excess padding in IE 8/9. 
* 3. Removes excess padding in IE 7. 
* Known issue: excess padding remains in IE 6. 
*/ 

input[type="checkbox"], 
input[type="radio"] { 
    box-sizing: border-box; /* 1 */ 
    padding: 0; /* 2 */ 
    *height: 13px; /* 3 */ 
    *width: 13px; /* 3 */ 
} 

/* 
* 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome. 
* 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome 
* (include `-moz` to future-proof). 
*/ 

input[type="search"] { 
    -webkit-appearance: textfield; /* 1 */ 
    -moz-box-sizing: content-box; 
    -webkit-box-sizing: content-box; /* 2 */ 
    box-sizing: content-box; 
}