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

最新推荐文章于 2023-10-25 21:22:00 发布

筱葭

最新推荐文章于 2023-10-25 21:22:00 发布

阅读量1w

点赞数 5

分类专栏： HTML 文章标签： html5 浏览器兼容

本文链接：https://blog.csdn.net/zhouziyu2011/article/details/58588947

版权

22 篇文章 1 订阅

订阅专栏

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

①　新特性：

1)绘画<canvas>。

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

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

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

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

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

②　移除的元素：

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="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->

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

b)使用kill IE6

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

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

④　区分HTML和HTML5：

1)DOCTYPE声明

2)新增的元素

关注