Lỗi phần thân của Firefox?

Question

Tôi có ví dụ này đơn giản:

<header> 
    <ul> 
     <li>Item</li> 
     <li>Item</li> 
     <li>Item</li> 
     <li>Item</li> 
     <li class="clear"></li> 
    </ul> 
</header> 
<section>section</section> 

Và mảnh này css:

BODY, HTML{ 
    margin: 0; 
} 
header{ 
    margin-bottom: 100px; /* section goes down */ 
} 
UL{ 
    list-style-type: none; 
} 
UL LI{ 
    float: left; 
    background: green; 
} 
.clear{ 
    clear: both; 
    float: none; 
} 
section{ 
    background: red; 
} 

Vì vậy, tôi hy vọng "tiêu đề" đi thẳng vào góc trên bên trái, sau đó 100px lề, sau đó "phần ". Trong tất cả các trình duyệt chính hoạt động như mong đợi, nhưng trong Firefox (phiên bản 16) "tiêu đề" có thêm lề-đầu vì lý do nào đó.

Đây có phải là lỗi không?

Dưới đây là một ví dụ jsfiddle: http://jsfiddle.net/AvZek/2/

BTW Nếu tôi sử dụng clearfix thay vì lớp "rõ ràng" hơn nó chỉ làm việc tốt.

Answer 1

Đây là, không nghi ngờ gì nữa, một lỗi. Phần lợi nhuận chắc chắn không phải là ở đó.

• Theo Firebug, chỉ khác không lợi nhuận được tính toán mà tôi có thể nhìn thấy là như nhau margin-bottom: 100px vào yếu tố header của bạn như trong CSS của bạn. Mọi thứ khác là không.

• Ngay cả thanh tra DOM của Firebug cũng gặp khó khăn trong việc xác định nó; nó không bao giờ làm nổi bật khu vực đó, với ngoại lệ rõ ràng khi bạn tự kiểm tra html (mà nó nổi bật như là một phần của khu vực nội dung của nó).

Tôi tìm thấy hàng tấn báo cáo lỗi đã bị đóng dưới dạng bản sao của this one, với nhiều trường hợp kiểm tra khác. Ngoài ra, có vẻ như nó đã tồn tại từ ít nhất Firefox 2.

Answer 2

bạn có thể sử dụng {padding-bottom:100px;} thay vì lợi nhuận để đạt được điều này ..

Answer 3

Thay vì gây ô nhiễm mã của bạn với phi ngữ nghĩa và không cần thiết rỗng <li> -s chỉ cần thêm overflow: hidden để <ul>

của bạn HTML

<header> 
    <ul> 
     <li>Item</li> 
     <li>Item</li> 
     <li>Item</li> 
     <li>Item</li> 
    </ul> 
</header> 
<section>section</section> 

CSS

ul { 
    list-style-type: none; 
    overflow: hidden; 
} 

DEMO