html - html5 sectioning 元素的问题

Question

所以我在使用 HTML5 分段元素时遇到了问题。看来我必须创建容器，否则它们不是 block 级的。我确实添加了 CSS 重置，所以我不知道这是否导致了它。不确定我是否应该放入我的完整代码。我想确保它没有我不需要的额外代码。

无论如何这里是 html5 的一部分:

<div class="wrapper"><nav><ul>
<li><a href="#">About</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Content</a></li>
</ul>
</nav>
</div>

如果我没有那个包装器，无论出于何种原因，它都不会像 block 引号一样对待它。

Answer 1

支持 HTML5 语义元素的最低版本浏览器:IE 9、Firefox 4、Chrome 8、Safari 5、Opera 11.1、Safari iOS 4、Android 2.1。

如果您使用的是旧版浏览器，浏览器会将所有无法识别的元素构建为内联元素。要解决此问题，您只需向 CSS 添加一条新规则:

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

此 CSS 规则不会对识别 HTML5 的浏览器产生负面影响，因为属性“display”已设置为“block”。

旧版本的 IE (<9) 还有其他问题。他们拒绝将 CSS 规则格式应用于他们不认识的元素。要修复它:

<script>
    document.createElement('article');
    document.createElement('aside');
    ...
    document.createElement('section');        
</script>

或者如果你不想为所有元素编写代码，你可以使用这个脚本:html5shiv.js .另外，您会感兴趣:Modernizr