Может ли <a>содержать <footer>в HTML5?

Question

У меня есть структура, которая выглядит следующим образом:

<a href="#">
  <footer>
    <p>Some text</p>
    <h2>A Heading</h2>
  </footer>
</a>

Это работает и отображается, как и ожидалось, во всех браузерах (даже IE6 с HTML5shiv.js), кроме Firefox 3.6.В Firefox 3.6 дисплей полностью закручен, и если вы используете Firebug для проверки DOM, элемент <footer> пуст, а элементы, которые должны быть внутри него, находятся за его пределами.

Все теги закрыты правильно,<a> в CSS имеет значение display:block.

Валидатор W3C проверяет документ и не помечает эту структуру как неправильную.

В спецификации указано, что элемент <a>может классифицироваться как содержимое потока, если оно содержит другое содержимое потока.<footer> - это содержимое потока.

Это просто, что Firefox 3.6 не полностью корректно отображает HTML?

Есть идеи для исправления?

Та!

Answer 1

Согласно W3C HTML5 Reference Элемент нижнего колонтитула Модель содержимого:

Содержание потока, но без заголовка потомки контента, без секционирования содержание потомков, а не нижний колонтитул элемент потомки.

Какой элемент a представляет собой интерактивный контент . (Который также может представлять собой Flow Content )

Таким образом, использование элемента a будет проверяться, если вы проверяете его по стандартам HTML5. Используя что-то вроде валидатора W3C .

Итак, чтобы ответить на ваш вопрос, FireFox 3.6 не полностью соответствует стандартам HTML5. FireFox 4.0 соответствует лучше, чем 3,6. Вы можете найти список элементов HTML5 (и CSS3), поддерживаемых устаревшими браузерами здесь .

Что касается исправления, я бы предложил вам скрыть нижний колонтитул от Firefox и показать div с вашим контентом, который скрыт для всего, кроме firefox. Я бы достиг этого, используя jQuery Обозреватель CSS-браузера с использованием jQuery вместо Hacks - хорошее место для начала.

Answer 2

Firefox 3.6 не реализует алгоритм синтаксического анализа HTML5;в основном, он имеет HTML4-анализатор.

Я думаю, что ваши варианты обхода проблемы:

1. Избегайте HTML-тегов "уровня блока" внутри нижнего колонтитула.<span> как ребенок <a>, обертывающий <footer>.
2. Поместите <div> как дочерний элемент <a>, оборачивающий <footer>.