HTML5 - Включение <li>в <a>проблемы Firefox?

Question

Когда я делаю это ...

<li>
    <a href="#">
      <img src="#" width="#" height="#" alt="#" />
      <ol class="#">
        <li>#</li>
        <li>#</li>
        <li>#</li>
      </ol>
    </a>
 </li>   

В Firefox он выглядит так ...

 <li>
    <a href="#">
      <img src="#" width="#" height="#" alt="#" />
    </a>
      <ol class="#">
      <a href="#"></a>
        <li>a href="#">#</a></li>
      <a href="#"></a>
        <li>a href="#">#</a></li>
      <a href="#"></a>
        <li>a href="#">#</a></li>
      </ol>
    <a href="#"></a>
 </li>     

Похоже, что правильно отображается в Webkit. Есть идеи?

Answer 1

Хотя HTML5 теперь позволяет элементам <a> содержать элементы уровня блока (например, ol), синтаксический анализатор Firefox традиционно не соглашался с этим, вместо этого преобразовывая их в последовательность отдельных <a> внутри элементов уровня блока, напримерчто они окружают только встроенные элементы уровня, и это то, что вы видите.

Поскольку Firefox был единственным из основных браузеров, который сделал это, люди Mozilla приняли изменение HTML5, согласились изменить свой парсер, чтобы разрешитьэлемент <a> для переноса содержимого блока.(Это всего лишь одно из многих изменений в синтаксическом анализаторе для HTML5, хотя, возможно, оно является наиболее заметным)

Это изменение произошло в Firefox 4, поэтому вы не увидите там проблемы, кроме Firefox 3.x по-прежнему использует старое поведение.

Обходные пути, включающие использование <div> с атрибутом onclick вместо <a> и использование JavaScript для переноса блока в элемент <a>, но нет-JS решение.Учитывая, что (а) страница все еще должна быть пригодна для использования как есть, и (б) что Firefox 3.x должен исчезнуть в не слишком отдаленном будущем, один разумный вариант - это просто принять странное поведение Firefox 3 на данный момент.

Answer 2

Тег <a> имеет стиль по умолчанию display:inline;, что делает его неподходящим для содержания элементов уровня блока.

Однако вы можете обойти проблему, изменив свойство display <a>элемента в block или inline-block, в зависимости от того, как вы хотите, чтобы он отображался.

(Я отмечаю, что вы используете HTML5, так что все будет в порядке. Имейте в виду, что в xhtml этопросто запрещается заключать элементы уровня блока в тег <a>. В этом случае это не повлияет на вас, но стоит знать, если вам когда-нибудь придется работать с кодом с типом документа xhtml)