min-height/min-width không tôn trọng hộp kích thước trong một số trình duyệt

Question

Xem ví dụ này: http://jsfiddle.net/vrgT3/5/

tôi đã thực hiện một div 250x250px mẹ với overflow: auto; để thanh cuộn xuất hiện khi nội dung tràn hộp. Tôi đã thiết lập một nền màu xanh để làm cho nó rõ ràng khi phụ huynh có thể nhìn thấy.

Bên trong bố mẹ là div con với nền màu đỏ để hiển thị. Nó có 8px đường viền màu đen và box-sizing: border-box; do đó đệm và đường viền được bao gồm trong việc tính toán kích thước của hộp. Div con được đặt thành min-height: 100% và min-width: 100%.

Kết quả mong đợi: div con phải có cùng kích thước giống như hình gốc, vì vậy không có màu xanh dương được hiển thị và không có thanh cuộn xuất hiện. Kích thước hộp được tính toán (nội dung + đệm + đường viền) phải là 250x250px. Phải có 8px viền đen inlaying này, để lại một khu vực màu đỏ 234x234px.

Hoạt động trên:

• Midori 4.1 Ubuntu
• Chromium 16 Ubuntu
• Opera 11,61 Ubuntu

Các vấn đề với:

• IE 8 WinXP: Thanh cuộn ngang và dọc xuất hiện. Nội dung là 249x266px có đường viền 8px cho kích thước hộp được tính là 265x282px.

• Firefox 3.6 WinXP: Thanh cuộn dọc xuất hiện. Nội dung là 217x250px và kích thước hộp được tính là 233x266px.

• Firefox 10 Ubuntu: Thanh cuộn dọc xuất hiện, nội dung là 221x250px, kích thước hộp được tính là 237x266px.

Tôi đã kiểm tra caniuse.com và dường như ít nhất là trình duyệt trong câu hỏi hỗ trợ cần thiết min-height, min-width, và box-sizing. Đưa cái gì?

Giải pháp: Như Marat đã đề xuất, đây thực sự là lỗi trình duyệt. Tôi đã giải quyết cách giải quyết khác bằng cách sử dụng JavaScript để thêm đệm/lề để sửa cho các chênh lệch trong offsetWidth/Height. Xem tại đây: http://jsfiddle.net/vrgT3/8/

Answer 1

Đây là lỗi không may của Firefox (xem bug 308801) và IE8 (IE9 hoạt động chính xác).

Lỗi được khắc phục trong Firefox 17+.