Firefox: giải thích sai về mô hình hộp?

Question

Tôi vừa phát hiện ra hành vi kỳ lạ của Firefox.

Nếu tôi có ô bảng có chiều cao 100px và thêm 20px đệm vào - tổng chiều cao sẽ là 140px.

Tất cả các trình duyệt hoạt động một cách chính xác, Firefox 8.0 bỏ qua padding:

http://jsfiddle.net/8wDde/

Bất cứ ai biết cách khắc phục?

Answer 1

Có vẻ như giải pháp trình duyệt chéo tốt nhất có thể để thiết lập chiều cao đầy đủ các dòng của bảng bằng với chiều cao và padding của tế bào:

tr {height: 140px;} 

Xem: http://jsfiddle.net/8wDde/19/

Answer 2

đó là hành vi lạ. thêm display:block; có thể khắc phục sự cố. thử nghiệm trong FF8.01 see:

http://jsfiddle.net/8wDde/1/

Nhưng tôi cũng không biết tại sao?

Tôi đã tìm kiếm trong https://developer.mozilla.org/en-US/search?q=table+padding, nhưng không tìm thấy bất kỳ thứ gì. Có thể bạn cũng có thể thử tìm kiếm trong đó.

UPDATE: http://jsfiddle.net/8wDde/7/

thêm overflow:hidden để tránh dòng td thay đổi.

Answer 3

Tôi không thể tìm thấy bất kỳ thông tin nào về điều này trên Google, do đó, một cách để khắc phục sự cố cho Firefox là sử dụng chức năng hack CSS.

@-moz-document url-prefix() { 
td{ 
    height:140px !important; 
} 
} 

Rõ ràng, nếu chiều cao là 200px, sau đó bạn muốn thay đổi điều đó để 240px vào tài khoản cho thiếu 20px trên đầu và ở phía dưới.

Nhắm mục tiêu tất cả các phiên bản Firefox, tôi không chắc chắn liệu có một lỗi css cụ thể FF8 hay không.

Bạn có thể xem demo ở đây: http://jsfiddle.net/charlescarver/8wDde/2/

Chỉnh sửa: Tôi thích câu trả lời Giberno của hơn

Answer 4

Đây là mô tả đầy đủ hơn về một số nhận xét tôi đã tạo trên another question, hy vọng một chút rõ ràng hơn. Lưu ý rằng Opera có hành vi tương tự như Firefox.

Trong sơ đồ trên, tổng diện tích ô là hộp tối và văn bản My Text là nội dung của td và đó là định nghĩa Ô di động (C).

Bây giờ, CSS 2.1 spec nói:

Chiều cao của hộp một 'bảng hàng' yếu tố được tính một lần user agent có tất cả các tế bào trong hàng có sẵn: đó là tối đa 'chiều cao' các hàng của tính toán, chiều cao tính toán của mỗi ô trong hàng và chiều cao tối thiểu (MIN) theo yêu cầu của các ô. Giá trị 'chiều cao' 'tự động' cho 'hàng trong bảng' có nghĩa là chiều cao hàng được sử dụng cho bố cục là MIN. MIN phụ thuộc vào chiều cao hộp di động và căn chỉnh hộp di động (nhiều như tính toán chiều cao hộp đường). ...

Trong CSS 2.1, chiều cao của ô là chiều cao tối thiểu được yêu cầu bởi nội dung. Thuộc tính 'chiều cao' của ô bảng có thể ảnh hưởng đến chiều cao của hàng (xem ở trên), nhưng nó không làm tăng chiều cao của hộp thoại.

Vì vậy, td { height:100px; } ảnh hưởng đến chiều cao hàng (R) (nó cao ít nhất 100px) nhưng không ảnh hưởng đến Ô di động (C).

Mặt khác, td { padding:20px; } áp dụng cho Ô di động (C), vì vậy nếu chiều cao của (C) + Đệm trên + Đệm dưới nhỏ hơn 100px, chiều cao hàng không bị ảnh hưởng và vẫn là 100px.

Nếu (C) + Đệm trên cùng + Đệm đáy lớn hơn 100px, chiều cao hàng sẽ mở rộng để phù hợp với chiều cao đầy đủ của (C) + Đệm trên cùng + Đệm đáy.

Sau đó, td { background-color:blue } áp dụng cho chiều cao toàn bộ hàng (R) và chiều rộng ô.

Bạn có thể thấy điều này trong hành động ở http://jsfiddle.net/Ez7xz/

Yếu tố khó hiểu cuối cùng là giá trị của chiều cao tính toán của td trong Firebug. Những gì dường như đang xảy ra ở đây là nó giả định rằng chiều cao là kết quả của kích thước hộp content-box, và báo cáo giá trị của R ít đệm trên và dưới. Trong khi điều này có vẻ kỳ lạ, nó không rõ ràng những gì giá trị khác nó hợp lý có thể báo cáo.