đệm dưới không làm việc trên nguyên tố tràn trong các trình duyệt không chrome

Question

Nếu bạn có một cái nhìn tại fiddle này trong Chrome: http://jsfiddle.net/up4Fa/

Bạn sẽ thấy một yếu tố tràn có 20px padding bên trong nó! Tất cả đều ổn và làm việc như mong đợi.

Tuy nhiên nếu bạn chạy thử nghiệm tương tự trong IE9 hoặc Firefox văn bản ở phía dưới chạm vào cạnh của container và đệm đáy đang được bỏ qua ...

Nếu tôi làm đệm trên một div bên trong nó sẽ vấn đề, NHƯNG tôi muốn sửa chữa nó nhiều hơn với một div và không thể hiểu tại sao BOTH firefox và IE có vấn đề nhưng không phải Chrome?

CHỈNH SỬA: Văn bản không phải là lý do trong trường hợp có ai đó thắc mắc! Nó sẽ làm tương tự với hộp màu đỏ nếu tôi xóa văn bản.

Cảm ơn

Answer 1

Dường như khi bạn đang thiết lập kích thước của div container gián tiếp bằng cách định vị, những trình duyệt không để dự đoán chiều cao của div và làm cho đệm đúng cách. Một thủ thuật nhanh chóng và dơ bẩn để sửa lỗi này là để loại bỏ các đệm dưới cùng của container:

div.container { 
    ... 
    padding: 20px 20px 0 20px; 
    ... 
} 

Và thêm một lề dưới để nó con lần cuối:

div.container > *:last-child { 
    margin-bottom: 20px; 
} 

http://jsfiddle.net/xa9qF/

Answer 2

Một tốt nhất cách tiếp cận, theo ý kiến ​​của tôi, đang sử dụng công cụ chọn :after

div.container:after{ 
    content:""; 
    display:block; 
    height:20px; /* Which is the padding of div.container */ 
} 

http://jsfiddle.net/up4Fa/23/