<h1> меньше, чем <h2> в Firefox и Chrome

Question

Последний обновленный код находится здесь: http://pastebin.com/TJweMgtL

Начиная слева, IE 8, Chrome, Firefox 5 .. вы можете видеть, что только IE8 может отображать h1 и h2 элементов правильно.

Что вы, ребята, думаете?Что вызывает проблему?Были ли у меня какие-либо несоответствующие теги?Спасибо!

---

РЕДАКТИРОВАТЬ H1 и H2 в порядке в HTML4.Я предполагаю, что это проблема браузера?

---

Новое обновление

Я удалил большинство ненужных кодов и оставил только то, что имеет отношение к вопросу.Заранее спасибо за помощь!

Последний обновленный код здесь: http://pastebin.com/TJweMgtL

Answer 1

В HTML5 <h1> внутри разделов, вложенных n уровней в глубину, обрабатывается как <h(n+1)>.Таким образом, <h1> внутри одного <section> семантически эквивалентно <h2> и отображается как таковой.В этом контексте «разделы» означают любые из <section>, <article>, <nav> или <aside>.Глядя на ваш код, заголовок «test-again (теперь small)» находится внутри статьи, которая находится внутри раздела, поэтому он такой же, как <h3>.Это меньше, чем <h2>.

Firefox и Chrome реализуют эту часть HTML5.IE, похоже, пока нет.

См. Пример на http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#headings-and-sections и правила стиля на http://www.whatwg.org/specs/web-apps/current-work/multipage/rendering.html#sections-and-headings

Answer 2

Проверьте ваши HTML и CSS для этих списков ошибок.Я просто скопировал сырой код и придумал довольно глупые вещи.

Answer 3

Это не рендеринг H1 во вложенном разделе, который увеличивает H2 ... просто производители браузеров думают / соглашаются, что после веб-редакторов, производителей и разработчиков h2 обычно рассматривается как визуальный более важный заголовок ! Ничего о рендеринге контуров здесь!

Смотрите мой пример здесь: http://pastebin.com/yJ1vzEjj

Поскольку IE8 НЕ делает этого, просто показывает, что эти соглашения еще не прибыли в штаб-квартиру Microsoft, но ... опять же, это БАГ, а не ОСОБЕННОСТЬ: -)

Удачи!