问题样式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>

回答

相关问题