如何让旧浏览器支持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 现在已经不是SGML的子集,主要是关于图像,位置,存储,多任务等功能的增加 ① 新特性: 1)绘画 2)用于媒介回放的和 3)本地离线存储长期存储数据,浏览器关闭后数据不丢失 4)的数...
  • zhouziyu2011
  • zhouziyu2011
  • 2017年02月28日 11:37
  • 2420

让不支持HTML5的老浏览器 “兼容”HTML5

为了能让那些陈旧的浏览器显示HTML5效果 我们需要做的是: 1、CSS属性 变成块元素 header, section, footer, aside, nav, main, ...
  • gelivable007
  • gelivable007
  • 2015年10月20日 14:53
  • 379

html5有哪些新特性?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和 HTML5?

(Q1)  HTML5 现在已经不是 SGML 的子集,主要是关于图像,位置,存储,多任务等功能的增加。 (1)绘画 canvas; (2)用于媒介回放的 video 和 audio 元素; ...
  • palette_
  • palette_
  • 2017年05月02日 21:10
  • 958

HTML5----IE低版本支持HTML5标签方法,css 浏览器网页兼容性

什么是浏览器兼容: 当我们使用不同的浏览器(Firefox IE7 IE6)访问同一个网站,或者页面的时候,会出现一些不兼容的问题,有的显示出来正常,有的显示出来不正常,我们在编写CSS的时候会...
  • damys
  • damys
  • 2013年03月01日 14:28
  • 2857

怎么处理HTML5的新标签对IE浏览器兼容问题?

方法一: IE6~IE8支持通过document.createElement方法产生的标签,可以利用这一特性让这些浏览器支持HTML5新标签,浏览器支持新标签后,还需要添加标签默认的样式。 ...
  • wangweiscsdn
  • wangweiscsdn
  • 2017年06月13日 11:18
  • 415

html5有哪些新特性、移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和 HTML5?

*HTML5 现在已经不是SGML 的子集,主要是关于图像,位置,存储,多任务等功能的增加。 *绘画canvas    用于媒介回放的video 和audio 元素   本地离线存储local...
  • wang1006008051
  • wang1006008051
  • 2017年10月08日 19:22
  • 234

html5有哪些新特性、移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和HTML5?

html5有哪些新特性,移除了那些元素?如何处理html5新标签的浏览器兼容问题 article;IE7/。 2,还新增了以下的几大类元素,利用这一特性让这些浏览器支持HTML5新标签,tt、hea...
  • ermao_zbp
  • ermao_zbp
  • 2017年11月16日 14:04
  • 230

如何检测您的浏览器是否支持HTML5视频

如何检测您的浏览器是否支持HTML5视频,看下面代码: function checkVideo() { if(!!document.createElement('video').canPlayTyp...
  • xmt1139057136
  • xmt1139057136
  • 2014年11月26日 12:00
  • 7258

兼容问题

作为一名前端工程师,无论工作年头长短都应该必须掌握的知识点:此条由 王子墨 发表在 前端随笔 DOM结构 —— 两个节点之间可能存在哪些关系以及如何在节点之间任意移动。 DOM操作 —...
  • niudanxia
  • niudanxia
  • 2015年06月30日 17:39
  • 622

HTML5新标签在IE6/IE7/IE8中的几种兼容方式

HTML5新标签在IE6/IE7/IE8中的几种兼容方式 coding javascript 代码块 (function(){ If(!0) Return;...
  • gzz168
  • gzz168
  • 2016年05月20日 17:05
  • 4112
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:如何让旧浏览器支持HTML5新标签
举报原因:
原因补充:

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