如何让旧浏览器支持HTML5新标签
如何让旧浏览器支持HTML5新标签
HTML5学堂
发布于 2018-03-12 15:47:03
发布于 2018-03-12 15:47:03
如何让旧浏览器支持HTML5新增标签
HTML5出现也不短了，很多网站的页面都进行了改版，为了降低代码量（不需要起太多的类名），提升加载速度，提高标签的语义性，因此，在网页中大量使用了section，article，header等HTML5标签。自己最近在写响应式布局的范例，里面也使用到了header等标签。还是比较希望能够做成兼容“旧版浏览器”的，在此和大家共享一下，如何让旧浏览器支持HTML5新增标签。
书写的基本的HML代码：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>让旧浏览器支持HTML5新增标签-独行冰海</title>
</head>
<body>
<header>顶部内容</header>
<nav>导航内容</nav>
<article>文章内容</article>
<footer>底部内容</footer>
</body>
</html>Google等新浏览器中的表现：
IE6中的表现：
具体步骤
其实，让旧浏览器支持HTML5新增标签，听上去很难，操作起来很简单，只需要你懂DOM操作就足够了。
首先我们使用js进行标签的创建，为HTML文件创建我们需要的这几个HTML5标签。
<script>
document.createElement('header');
document.createElement('nav');
document.createElement('article');
document.createElement('footer');
</script>接下来，我们需要使用css进行这几个HTML5标签的样式控制。这是因为，通过这种方法创建的新标签，默认是行内元素。因此需要添加如下代码：
<style>
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary{
display: block;
}
</style>对于代码位置，我们需要注意，要将script标签放置到head中，而不是body的后面，这是因为，浏览器从上到下进行代码的执行与解析，在已经渲染之后再执行js就没有任何意义和价值了。
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2015-12-01，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读