問題樣式HTML5語義元素，如<section>,<nav>和<article>

所以我正在使用HAML和SASS的一些HTML5代碼。問題樣式HTML5語義元素，如<section>,<nav>和<article>

我現在有ID爲「餐廳 - 信息」

HAML一個DIV：

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

SASS：

#restaurant-info { 
    background: #F00; 
}

在Firefox中，這是創建以下HTML：

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

此塊在瀏覽器中使用紅色（＃F00）背景進行了正確設置。如果我檢查了部分元素，我看到：

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

然而，當我改變DIV的部分，像這樣：

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

在Firefox現在這導致下面的標記：

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

但是，節完全丟失背景顏色。然而，當我去檢查Firefox中的部分元素，它是正確的風格確切以前一樣：

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

爲什麼簡單地改變一個正確的風格DIV（即僅由僅其在CSS ID標識）到SECTION元素打破Firefox 3.6.10中的樣式？我爲每一個可能的部分檢查了「檢查元素」，並且Firefox告訴我計算出的背景色是＃FF0000，但它並沒有顯示出來。這在Safari 5.0.2中似乎不成問題。

我可以得出的唯一結論是這是一個非常具體的錯誤。任何人有任何其他想法？

來源

2010-10-11 Andrew De Andrade

您需要添加display:block所有的塊級的HTML5元素：

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

他們誰也沒有默認的CSS樣式，在大多數瀏覽器，和未知的元素都被視爲在Firefox內聯。

來源

2010-10-11 20:34:28

感謝您在聲明最後的補充說明，我當然應該這麼說。 – 2010-10-12 08:55:15

我試過了「display：block;」在這個單獨的項目上的方法，它不起作用。做什麼工作是添加「display：inline-block;」和「寬度：100％」。我會嘗試將上面提到的那一行添加到該網站的瀏覽器重置代碼中，並查看它是否允許我在沒有當前黑客的情況下生活。 – 2010-10-12 17:39:30

難道你不是隻是喜歡它在Chrome中的工作原理，而不是在其他瀏覽器中工作？嘆。 – ashes999 2011-06-05 01:05:55

問題樣式HTML5語義元素，如<section>,<nav>和<article>

回答

相關問題