html5shiv.js解决IE6-IE8使用HTML5新标签的兼容性问题

学习笔记 马富天 2016-07-06 19:48:26 108 1

【摘要】问题描述:IE6-IE8浏览器对于HTML5中的新标签是不支持的,IE9及以上版本是支持HTML5新标签的。

HTML5新标签举例:

  1. <header>定义页面或区段的头部
  2. <footer>定义页面或区段的尾部
  3. <nav>定义页面或区段的导航区域
  4. <section>页面的逻辑区域或内容组合
  5. <article>定义正文或一篇完整的内容
  6. <aside>定义补充或相关内容

HTML5新标签在IE6-IE8浏览器是无法识别的,并且默认把新标签忽略,且不能应用于CSS样式中(即忽略CSS样式的标签选择器)。

看下面一段代码:

  1. <!doctype html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title>HTML5新标签在IE6-IE8的显示</title>
  6. 		<style type="text/css">
  7. 			article{color:red;}
  8. 		</style>
  9. 	</head>
  10. 	<body>
  11. 		<article>这是一篇文章</article>
  12. 		<article>这也是一篇文章</article>
  13. 	</body>
  14. </html>

在非IE6-IE8的浏览器中的效果图:

请输入图片名称

在IE8下的效果图:

请输入图片名称

由此可见,article标签在非IE6-IE8浏览器下是表现为块级元素,并且CSS的标签选择器article也起了作用color:red,但是在IE6-IE8下是不识别article元素的,并且也无法识别CSS的color:red,这就是IE6-IE8下不兼容HTML5新标签的一个小例子。

解决办法:在页面的head元素中加入下面一行即可解决问题,注意了务必将放置在页面中的head部分,原因是IE在解析新元素之前需要调用到html5shiv.js文件,才能够解决这个问题。

  1. <!--[if lt IE 9]>
  2. 	<script src="js/html5shiv.js"></script>
  3. <![endif]-->

加入了html5shiv.js之后,IE8下的效果图如下:

请输入图片名称

这样就解决了问题。

解决办法原理:利用document.createElement("")创建对应的脚本,CSS选择器便可正确应用到该标签。有兴趣的话可以看看html5shiv.js的代码。下面这段代码跟加入html5shiv.js的效果是一样的,现在明白其原理了吗~

  1. <!doctype html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title>HTML5新标签在IE6-IE8的显示</title>
  6. 		<script type="text/javascript">
  7. 			document.createElement('article');			
  8. 		</script>
  9. 		<style type="text/css">
  10. 			article{display:block;color:red;}
  11. 		</style>
  12. 	</head>
  13. 	<body>
  14. 		<article>这是一篇文章</article>
  15. 		<article>这也是一篇文章</article>
  16. 	</body>
  17. </html>

图:

请输入图片名称

html5shiv.js下载地址:

Bootstrap中文网开源项目免费CDN服务:http://www.bootcdn.cn/html5shiv/

另外注意html5shiv.js是谷歌公司写的,其官网下载地址是:http://code.google.com/p/html5shiv/ 但是一般国内没有翻墙的话是无法访问的,推荐通过上面一个地址下载。

版权归 马富天PHP博客 所有

本文标题:《html5shiv.js解决IE6-IE8使用HTML5新标签的兼容性问题》

本文链接地址:http://www.mafutian.net/154.html

转载请务必注明出处,小生将不胜感激,谢谢! 喜欢本文或觉得本文对您有帮助,请分享给您的朋友 ^_^

0

3

上一篇《 【仅供了解】简单介绍一下jquery.min.map文件 》 下一篇《 传统的聚类分析方法简介 》

所有评论

  1. 首页
  2. 上一页
  3. 1
  4. 下一页
  5. 尾页
  6. 第1页
  7. 每页12条
  8. 共1页
  9. 共1条
评论审核未开启
表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情
验证码

TOP10

  • 浏览最多
  • 评论最多