如何让旧浏览器支持HTML5新标签

转载 2015年07月10日 09:22:41

如何让旧浏览器支持HTML5新标签  

让旧浏览器支持HTML5新增标签

HTML5出现也不短了,很多网站的页面都进行了改版,为了降低代码量(不需要起太多的类名),提升加载速度,提高标签的语义性,因此,在网页中大量使用了section,article,header等HTML5标签。自己最近在写响应式布局的范例,里面也使用到了header等标签。还是比较希望能够做成兼容“旧版浏览器”的,在此和大家共享一下,如何让旧浏览器支持HTML5新增标签。

书写的基本的HTML代码:
  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>让旧浏览器支持HTML5新增标签-独行冰海</title>
  6. </head>
  7. <body>
  8.     <header>顶部内容</header>
  9.     <nav>导航内容</nav>
  10.     <article>文章内容</article>
  11.     <footer>底部内容</footer>
  12. </body>
  13. </html>
Google等新浏览器中的表现:
如何让旧浏览器支持HTML5新标签 - 独行冰海 - 独行冰海
 IE6中的表现:
如何让旧浏览器支持HTML5新标签 - 独行冰海 - 独行冰海
 

其实,让旧浏览器支持HTML5新增标签,听上去很难,操作起来很简单,只需要你懂DOM操作就足够了。

首先我们使用js进行标签的创建,为HTML文件创建我们需要的这几个HTML5标签。

  1. <script>
  2.     document.createElement('header');
  3.     document.createElement('nav');
  4.     document.createElement('article');
  5.     document.createElement('footer');
  6. </script>

接下来,我们需要使用css进行这几个HTML5标签的样式控制。这是因为,通过这种方法创建的新标签,默认是行内元素。因此需要添加如下代码:

  1. <style>
  2.     article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary{
  3.      display: block;
  4.     }
  5. </style>

对于代码位置,我们需要注意,要将script标签放置到head中,而不是body的后面,这是因为,浏览器从上到下进行代码的执行与解析,在已经渲染之后再执行js就没有任何意义和价值了。

原文:http://blog.163.com/hongshaoguoguo@126/blog/static/1804698120131150389717/

旧的浏览器兼容HTML5新标签的方法,以及语义化标签解释

让旧浏览器支持HTML5新增标签-独行冰海     顶部内容     导航内容     文章内容     底部内容 Google等新浏览器中的表现:  IE6中的表现: 其实,...

ie8以下版本(包括ie8)的浏览器不支持html5标签属性解决方案(Modernizr 2.6.2插件的使用)

ie8以下版本(包括ie8)的浏览器不支持html5标签属性解决方案(Modernizr 2.6.2插件的使用)...

让所有浏览器支持HTML5 video视频标签

一、前面的唠叨 我记得就是前几个月吧,有条消息说YouTube支持了HTML5视频嵌入标签video,好吧,我听说而已,因为我不是个擅长翻墙的人,到底如何我也不得而知。 与主题不相关的HTML5方...

让所有浏览器支持HTML5 video视频标签

http://www.zhangxinxu.com/wordpress/2010/03/%E8%AE%A9%E6%89%80%E6%9C%89%E6%B5%8F%E8%A7%88%E5%99%A8%E...

如何在 IE6 等老式浏览器中使用HTML5的新标签

HTML5的出现激起了我们前端开发人员心中的浪潮,因为HTML5 向开发人员提供了很多新的标签, 如 section, nav, article, header 和 footer 等。但IE6在中国的...

HTML5 video 标签浏览器兼容问题

HTML5 video 标签浏览器兼容问题 小示例代码地址:https://github.com/danhuan/video-demo IE8、火狐、谷歌测试通过。使用需要注意的问题:1.多种格式视...
  • danhuan
  • danhuan
  • 2017年07月21日 17:53
  • 972

不同浏览器对于html5 audio标签和音频格式的兼容性

不同浏览器对于html5 audio标签和音频格式的兼容性 音频格式 Chrome Firefox IE9 Opera Safari ...

(转)不同浏览器对于HTML5 audio标签和音频格式的兼容性

原地址:http://www.cnblogs.com/linn/p/3408515.html 音频格式 Chrome Firefox IE9 Opera Safari O...
  • duyiqun
  • duyiqun
  • 2016年12月24日 16:48
  • 484
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:如何让旧浏览器支持HTML5新标签
举报原因:
原因补充:

(最多只允许输入30个字)