浅谈HTML5新标签的浏览器兼容问题

① 新特性:

1)绘画<canvas>。

有关canvas的介绍请见:http://blog.csdn.net/zhouziyu2011/article/details/65682406http://blog.csdn.net/zhouziyu2011/article/details/66474969

2)用于媒介回放的<video>和<audio>。

有关video和audio的介绍请见:http://blog.csdn.net/zhouziyu2011/article/details/69084961

3)Web Storage的本地存储<localStorage>和会话存储<sessionStorage>。

有关localStorage和sessionStorage的介绍请见:http://blog.csdn.net/zhouziyu2011/article/details/58591829

4)语意化更好的内容元素,比如<article> <aside> <footer> <header> <nav> <section> <hgroup>。

5)表单控件<calendar> <date> <time> <email> <url> <search>。

6)新的技术<webworker> <websocket> <Geolocation>。

有关websocket的介绍请见:http://blog.csdn.net/zhouziyu2011/article/details/60871264

② 移除的元素:

1)纯表现的元素:<basefont> <big> <center> <font> <s> <strike> <tt> <u>。

2)对可用性产生负面影响的元素:<frame> <frameset> <noframes>。

③ 处理HTML5新标签的浏览器兼容问题:

当在页面中使用HTML5新标签时,可能会得到三种不同的结果:

1)结果1:新标签被当作错误处理并被忽略,在DOM构建时会当作这个标签不存在。

2)结果2:新标签被当作错误处理,并在DOM构建时,这个新标签会被构造成行内元素。

3)结果3:新标签被识别为HTML5标签,然后用DOM节点对其进行替换。

不能识别HTML5新标签而不能使用,解决办法有两种:

1)方法1:实现标签被识别

通过document.createElement(tagName)方法即可让浏览器识别新标签,浏览器支持新标签后,还可以为新标签添加CSS样式。

2)方法2:JavaScript解决方案

a)使用html5shim:

在<head>中调用以下代码:

  1. <!--[if lt IE 9]>

  2. <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>

  3. <![endif]-->

当然也可以直接把这个文件下载到自己的网站上,但这个文件必须在head标签中调用。

b)使用kill IE6

在</body>之前调用以下代码:

  1. <!--if lte IE 6]>

  2. <script src="http://letskillie6.googlecode.com/svn/trunk/letskillie6.zh_CN.pack.js"></script>

  3. <![endif]-->

④ 区分HTML和HTML5:

1)DOCTYPE声明

2)新增的元素