Điều gì là sai với yếu tố HTML5 <address> này?

Question

<div id="header-container"> 
     <address> 
     <ul> 
      <li>lorem ipsum</li> 
      <li>(xxx) xxx-xxxx</li> 
     </ul> 
    </address> 
</div> 

Và CSS trông như thế này:

#header-container address {float: right; margin-top: 25px;} 

Khi tôi tải trang, có vẻ tốt đẹp trong Chrome & IE, nhưng trong Firefox nó bỏ qua phong cách hoàn toàn. Khi tôi xem nguồn trong firefox nó trông giống như trên, nhưng trong Firebug nó trông như thế này:

<div id="header-container"> 
    <address> </address> 
    <ul> 
     <li>lorem ipsum</li> 
     <li>(xxx) xxx-xxxx</li> 
    </ul> 
</div> 

Answer 1

HTML5 vẫn là một dự thảo. Firefox 3.6 chưa hoàn toàn hỗ trợ HTML5.

Và theo HTML4 spec, address chỉ có thể chứa inline yếu tố:

<!ELEMENT ADDRESS - - (%inline;)* -- information on author --> 
<!ATTLIST ADDRESS 
    %attrs;        -- %coreattrs, %i18n, %events -- 
    > 

Đây là lý do tại sao Firefox coi nó không hợp lệ và ngắt trang của bạn.

Answer 2

Thêm khối hiển thị vào CSS. Và sau đó, thêm div clear_both trước khi đóng địa chỉ. Điều này sẽ khắc phục sự cố bất kỳ sự cố nào với các phần tử khối bên trong một nội tuyến.

CSS của bạn:

#header-container address {display: block; float: right; margin-top: 25px;} 
.clear { clear: both; } 

HTML:

<div id="header-container"> 
    <address> 
    <ul> 
     <li>lorem ipsum</li> 
     <li>(xxx) xxx-xxxx</li> 
    </ul> 
    <div class="clear"></div> 
    </address> 
</div> 

Answer 3

Một danh sách có thứ tự không thể được bao bọc bên trong một thẻ địa chỉ. Tôi đã kiểm tra bằng cách sử dụng firebug và Firefox di chuyển thẻ địa chỉ gần trước danh sách không có thứ tự.