Đây có phải là lỗi nổi của Firefox không?

Question

Nhà thiết kế đã yêu cầu bố cục vùng nội dung hai cột với hình ảnh ở cột bên trái, văn bản ở bên phải có báo giá độ rộng đầy đủ bên dưới hình ảnh đầu tiên.

Khách hàng sẽ nhập nội dung trong trang web do CMS điều khiển này để các cột cần mở rộng theo chiều dọc khi cần. Không có màu nền trên trang web thực vì vậy các cột không cần chiều cao bằng nhau.

http://jsfiddle.net/juo0ubjw/

<div class="container"> 
    <div class="top-left">Picture here</div> 
    <div class="full-width"> 
     <blockquote>Blockquote here</blockquote> 
    </div> 
    <div class="bottom-left">Picture here</div> 
    <div class="top-right"> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p> 
    </div> 
</div> 

.container { 
    width: 300px 
} 
.top-left { 
    background:red; 
    width:100px; 
    height:100px; 
    float:left; 
} 
.top-right { 
    background:blue; 
    margin-left:100px; 
    width:200px; 
} 
.full-width { 
    background:purple; 
    float:left; 
    width:100%; 
    height:80px; 
} 
.bottom-left { 
    background:green; 
    float:left; 
    width:100px; 
    height:100px; 
} 
p { 
    padding:10px; 
} 

Nó hoạt động tuyệt vời trong Safari, Chrome và IE. Nhưng trong Firefox, có một vấn đề kỳ lạ với một từ treo trên div bên phải.

sửa chữa của tôi: http://jsfiddle.net/rfoc71pe/

Tôi đã nhìn thấy đề cập đến trên đây của một lỗi FF phao liên quan đến độ rộng vô hạn và không gian màu trắng, nhưng điều đó dường như không phải là trường hợp ở đây là tất cả các độ rộng của tôi được định nghĩa và từ được gói.

Câu hỏi: Có ai biết tại sao điều này xảy ra và nếu đó thực sự là lỗi hoặc chỉ là sự cố với CSS của tôi? Tôi cũng tự hỏi nếu có một cách để sửa chữa nó mà cảm thấy ít hacky? Cảm ơn!

Answer 1

Tôi thực sự nghĩ rằng có một số loại lỗi. Nhưng, tôi tìm thấy một sửa chữa cho bạn :) Đây là: JSFiddle.

HTML

<div class="container"> 
<div class="top-left">Picture here</div> 
<div class="full-width"> 
    <blockquote>Blockquote here</blockquote> 
</div> 
<div class="bottom-left">Picture here</div> 
<div class="top-right"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p> 
</div> 

CSS

.container { 
    width: 300px 
} 

.top-left { 
    background:red; 
    width:100px; 
    height:100px; 
    float:left; 
} 

.top-right { 
    background:blue; 
    margin-left:100px; 
    width:200px; 
} 

.full-width { 
    background:purple; 
    float:left; 
    width:100%; 
    height:80px; 
    padding: 10px 0 10px 0; 
} 

.bottom-left { 
    background:green; 
    float:left; 
    width:100px; 
    height:100px; 
} 

p { 
    padding: 10px 10px 0 10px; 
} 

Nếu bạn buồn, bạn không cần phải có màu sắc và khối màu tím của bạn sẽ có màu trắng. Trong giải pháp của tôi, bạn không thể nhìn thấy đường viền của khối này.

Cố gắng viết lên diễn đàn của Mozilla và mô tả sự cố của bạn.