What is wrong with this HTML5 <address> element?

问题

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

And the CSS looks like this:

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

When I load the page, it looks fine in Chrome & IE, but in Firefox it's ignoring the styling completely. When I view source in firefox it looks like above, but in Firebug it looks like this:

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

回答1:

HTML5 is still a draft. Firefox 3.6 doesn't completely support HTML5 yet.

And according to the HTML4 spec, address can only contain inline elements:

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

This is why Firefox considers it invalid and your page breaks.

回答2:

An unordered list cannot be wrapped inside of a address tag. I checked using firebug and Firefox moves the close address tag before the unordered list.

回答3:

Add display block to CSS. And then, add the clear_both div before closing the address. This will fix any problems with block elements inside an inline ones.

Your CSS:

#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>

来源：https://stackoverflow.com/questions/4923072/what-is-wrong-with-this-html5-address-element