Что не так с этим элементом HTML5 <address>?

Question

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

И CSS выглядит так:

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

Когда я загружаю страницу, она отлично выглядит в Chrome и IE, но в Firefox полностью игнорирует стили. Когда я смотрю исходный код в Firefox, он выглядит выше, но в Firebug это выглядит так:

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

Answer 1

HTML5 все еще является черновиком . Firefox 3.6 еще не полностью поддерживает HTML5.

И, согласно спецификации HTML4 , address может содержать только inline элементов:

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

Вот почему Firefox считает его недействительным, и ваша страница разрывается.

Answer 2

Неупорядоченный список не может быть заключен в адресную метку. Я проверил, используя firebug, и Firefox перемещает тег адреса закрытия перед неупорядоченным списком.

Answer 3

Добавить блок отображения в CSS. Затем добавьте div clear_both перед закрытием адреса. Это исправит любые проблемы с блочными элементами внутри встроенных.

Ваш 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>