Question

The latest updated code is here: http://pastebin.com/TJweMgtL

Starting from the left, IE 8, Chrome, Firefox 5.. you can see that only IE8 can display h1

Answer 1

In HTML5, an <h1> inside sections nested n levels deep is treated like <h(n+1)> instead. So an <h1> inside a single <section> is semantically equivalent to an <h2> and is rendered as such. In this context "sections" means any of <section>, <article>, <nav>, or <aside>. Looking at your code, the "test-again (now small)" header is inside an article which is inside a section, so it's the same as an <h3>. Which is smaller than the <h2> of course.

Firefox and Chrome implement this part of HTML5. IE doesn't seem to yet.

See the example at http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#headings-and-sections and the style rules at http://www.whatwg.org/specs/web-apps/current-work/multipage/rendering.html#sections-and-headings

Answer 2

Validate your html and css for those lists of errors. I just copied the raw code and came up with some pretty goofy stuff.

Answer 3

It's not the rendering of a H1 in a nested section that makes the H2 bigger... it's just that browser manufacturers think/agreed, that beneath web editors, producers and developers the h2 is commonly treated as the visual more important heading! Nothing about outline rendering here!

See my example here: http://pastebin.com/yJ1vzEjj

For IE8 is NOT doing it, is just showing that these convention just hasnt arrived at Microsoft headquarters yet... again its a BUG, not a FEATURE :-)

Good luck!