<section>, <nav> ve <article>

Question

gibi HTML5 semantik elemanlarını şekillendirme sorunları Bu yüzden HAML ve SASS kullanarak bazı HTML5 kodları üzerinde çalışıyorum.

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

SASS:

: Firefox Bunda

#restaurant-info { 
    background: #F00; 
} 

aşağıdaki HTML yaratıyor

Şu anda id "restoran-bilgi"

haml ile bir DIV sahip

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

Bu blok, tarayıcıda kırmızı (# F00) arka plan ile doğru şekilde tasarlanmıştır. Ben bölüm öğeyi denetle, ben bu bakın:

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

Ancak, bir bölüme bu DIV değiştirdiğinizde, şöyle:

bu şimdi aşağıdaki biçimlendirmeye sonuçlanır Firefox'ta

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

:

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

Ancak, bölüm arka plan rengini tamamen kaybeder. Ben Firefox'ta bölüm öğeyi denetle giderken Ancak, doğru önce tamamen aynı tarz olduğunu:

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

Neden sadece doğru tarz DIV değişen yok (sadece CSS sadece kendi kimliği ile tanımlanır) bir SECTION elementi, Firefox 3.6.10'daki stili kırıyor mu? Her olası parça için "kontrol elemanını" inceledim ve Firefox bana hesaplanan arka plan renginin # FF0000 olduğunu söylese de bana bunu göstermiyor. Bu, Safari 5.0.2'de bir sorun gibi görünmüyor.

Çizebileceğim tek sonuç, bunun çok özel bir hata olmasıdır. Başka bir fikri olan var mı? Bunlardan

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

Yok çoğu tarayıcı varsayılan CSS stil var ve bilinmeyen unsurlar Firefox'ta satır içi olarak ele alınır:

Answer 1

Tüm blok düzeyi HTML5 öğelerine display:block eklemeniz gerekir.