Problemas al diseñar elementos semánticos HTML5 como <section>, <nav> y <article>

Question

Estoy trabajando en algún código HTML5 usando HAML y SASS.

Actualmente tengo un DIV con id "restaurante-info"

HAML:

#restaurant-info 
    %header#restaurant-header 
    %h2 Bob's Country Bunker 
    %nav#restaurant-tabs 
    ...etc... 

SASS:

#restaurant-info { 
    background: #F00; 
} 

En Firefox esto está creando el código HTML siguiente:

<div id='restaurant-info'> 
    <header id='restaurant-header'> 
    <h2>Bob's Country Bunker</h2> 
    <nav id='restaurant-tabs'> 
    ...etc... 

Este bloque está correctamente diseñado en el navegador con un fondo rojo (# F00). Si examino el elemento de sección, veo esto:

#content #restaurant-info { 
    -moz-border-radius:5px 5px 5px 5px; 
    background:none repeat scroll 0 0 #FF0000; 
    margin-top:20px; 
    overflow:hidden; 
} 

Sin embargo, cuando cambio que DIV a una sección, así:

%section#restaurant-info 
    %header#restaurant-header 
    %h2 Bob's Country Bunker 
    %nav#restaurant-tabs 
    ...etc... 

En Firefox esto ahora da como resultado el siguiente marcado:

<section id='restaurant-info'> 
    <header id='restaurant-header'> 
    <h2>Bob's Country Bunker</h2> 
    <nav id='restaurant-tabs'> 
    ...etc... 

Sin embargo, la sección pierde por completo su color de fondo. Sin embargo, cuando voy a inspeccionar el elemento de sección en Firefox, que se labra correctamente exactamente el mismo que antes:

#content #restaurant-info { 
    -moz-border-radius:5px 5px 5px 5px; 
    background:none repeat scroll 0 0 #FF0000; 
    margin-top:20px; 
    overflow:hidden; 
} 

¿Por qué un simple cambio de un DIV correctamente estilo (que se identifica únicamente por sólo su ID de CSS) a un elemento SECTION romper el estilo en Firefox 3.6.10? Revisé el "elemento de inspección" para cada pieza posible y Firefox me dice que el color de fondo calculado es # FF0000, pero no me lo muestra. Esto no parece ser un problema en Safari 5.0.2.

La única conclusión que puedo extraer es que este es un error muy específico. ¿Alguien tiene alguna otra idea?

Answer 1

Es necesario añadir display:block a todos los elementos de HTML5 nivel de bloque:

article, aside, figure, footer, header, hgroup, menu, nav, section { display:block; } 

Ninguno de ellos tiene un estilo CSS por defecto en la mayoría de los navegadores, y los elementos desconocidos se tratan como en línea en Firefox.