Tràn: ẩn lộn xộn với lề trong Chrome và Safari

Question

Tôi đã thiết lập một số div cho bố cục của mình, div chính và div menu.

Chúng trông hoàn hảo trong Firefox, nhưng vì một số lý do, Chrome và Safari bị rối tung lên.

Vì lý do nào đó chiều rộng của div sẽ nhỏ hơn khi overflow:hidden; được thêm vào CSS. Tôi cần overflow:hidden; mặc dù, bởi vì tôi có phao khác bên trong div chính. Bạn có thể xem ví dụ ở đây:

http://jsfiddle.net/kR7rs/2/

Nó xuất hiện tốt trong Firefox, nhưng trong Safari và Chrome, có một lề ở phía bên phải của div là tốt.

Answer 1

Loại bỏ lề từ main dường như để sửa chữa nó:

http://jsfiddle.net/kR7rs/3/

Những gì tôi nghĩ rằng nó xảy ra là khi overflow:hidden được thiết lập, toàn bộ phần tử kết thúc tốt đẹp xung quanh các phao nổi thay vì dòng chữ trong div. Vì vậy, điều này cho kết quả trong fiddle. Sau đó, nếu bạn thiết lập một lề trên nó cũng có, chiều rộng được giảm hơn nữa bởi padding bên trái.

Loại có vẻ như là lỗi.

(Đừng có FF ngay bây giờ để kiểm tra nó và xem nếu nó phá vỡ nó cho FF.)

Answer 2

Di chuyển overflow:hidden đến #wrapper. Điều đó sửa chữa nó, nhưng không giải thích tại sao.