简体   繁体   English

HTML5语义标签(文章,页脚,标题)的降级问题

[英]Degradation issues for HTML5 semantic tags (article, footer, header)

How well do the new layout tags in HTML5 degrade? HTML5中新布局标签的降级程度如何? What are the hazards in using them? 使用它们有什么危害? (I'm not talking about <video> --I've seen specific fallback code for it). (我不是在谈论<video>我已经看到了特定的回退代码)。

Specifically, in the case of something like 具体来说,在类似的情况下

<html>
<head></head>
<body>
<header>
<h1>Talking Dogs</h1>
<b><p>Humans aren't the only talkers!</p></b>
</header>
<article>
<p>Ever encountered a talking dog? I have.</p>
<p>It all happened one day as I was walking down the street...</p>
</article>
<footer>
© 2009 Woofer Dog Corporation
</footer>
</body>
</html>

Would using <header> , <article> , or <footer> cause any browser problems? 使用<header><article><footer>会导致任何浏览器问题吗? Do they degrade to <div> in unsupporting browsers automatically? 它们是否会在不支持的浏览器中自动降级为<div> Or if I include them, should I only include them for semantic meaning, and not for CSS styling or DOM scripting? 或者,如果我包含它们,我应该只包含它们用于语义,而不是CSS样式或DOM脚本吗?

As long as you use html5shiv to handle IE, it will work fine. 只要您使用html5shiv来处理IE,它就可以正常工作。

The browser will treat all unknown tags (including HTML5 tags) as normal inline elements. 浏览器会将所有未知标记(包括HTML5标记)视为普通的内联元素。
You should include the following CSS rule: 您应该包含以下CSS规则:

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

对于演示文稿,无论如何你都会使用CSS,所以如果浏览器理解标签本身并不重要。

HTML 5 Tags are not supported in IE the tags are still inactive. IE中不支持HTML 5标签,标签仍处于非活动状态。 To activate the semantic HTML5 tags in IE use the following script inside your head section. 要在IE中激活语义HTML5标记,请在head部分中使用以下脚本。

<!--[if IE]>
<script type="text/javascript">
(function(){
var html5elmeents = "address|article|aside|audio|canvas|command|datalist|details|dialog|figure|figcaption|footer|header|hgroup|keygen|mark|meter|menu|nav|progress|ruby|section|time|video".split('|');
for(var i = 0; i < html5elmeents.length; i++){
document.createElement(html5elmeents[i]);
}
}
)();
</script>
<![endif]-->

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM