100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > 浅谈HTML5新标签的浏览器兼容问题

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

时间:2018-10-03 05:37:05

相关推荐

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

HTML5 现在已经不是SGML的子集,主要是关于图像,位置,存储,多任务等功能的增加。

①新特性:

1)绘画<canvas>。

有关canvas的介绍请见:/zhouziyu/article/details/65682406和/zhouziyu/article/details/66474969

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

有关video和audio的介绍请见:/zhouziyu/article/details/69084961

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

有关localStorage和sessionStorage的介绍请见:/zhouziyu/article/details/58591829

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

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

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

有关websocket的介绍请见:/zhouziyu/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>中调用以下代码:

<!--[if lt IE 9]><script> src="/svn/trunk/html5.js"</script><![endif]-->

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

b)使用kill IE6

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

<!--if lte IE 6]><script src="/svn/trunk/letskillie6.zh_CN.pack.js"></script> <![endif]-->

④区分HTML和HTML5:

1)DOCTYPE声明

2)新增的元素

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。