HTML-HTML5+CSS3权威指南阅读(二、让IE支持HTML5标签及对CSS3 Media Query的兼容)
2015-01-16 16:35
621 查看
兼容解决
HTML5是在低版本的浏览器(IE8-)的兼容是有限的,类似很多结构性的标 签<header>、<section>、<footer>等在IE8以下不会被识别。有什么方法能实现兼容呢?在 高级浏览器能使用上这些标签,增强语义化;而在低级浏览器(包括IE6)上表现不会出错。那就需要引入html5.js这个文件。如何使用
既然是只有IE低版本需要使用,那就需要做个判断。<!--[if lte IE 8]> <script type="text/javascript" src="./js/html5.js"></script> <![endif]-->
需要注意的地方是,这段代码需要添加在head标签内,而不是最后写在前面即底部,因为IE浏览器必须在元素解析签知道这些元素。
响应式兼容方案一
Respond.js 是一个快速、轻量的 polyfill,用于为 IE6-8 以及其它不支持 CSS3 Media Queries 的浏览器提供媒体查询的 min-width 和 max-width 特性,实现响应式网页设计(Responsive Web Design)。这样子,IE6-8也能良好的展现,支持在浏览器中使用CSS3媒体查询功能.
使用方法
<!--[if lte IE 8]> <script type="text/javascript" src="./js/respond.min.js"></script> <![endif]-->
响应式兼容方案二
IE8 或者更低的版本不支持 CSS3 媒体查询,但通过添加脚本 css3-mediaqueries.js 来实现这一功能
<!--[if lt IE 9]> <script type="text/javascript" src=”http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js”></script> <![endif]-->
源文件下载
html5.js:http://xuanfengge.com/demo/201403/fuck-IE/html5.js
respond.min.js:http://www.xuanfengge.com/demo/201403/fuck-IE/respond.min.js
相关文章推荐
- HTML-HTML5+CSS3权威指南阅读(一、HTML5与HTML4之间的区别)
- HTML-HTML5+CSS3权威指南阅读(三、CSS3)
- HTML-HTML5+CSS3权威指南阅读(五、设备像素和CSS像素的概念)
- HTML-HTML5+CSS3权威指南阅读(四、媒体查询)
- HTML语义化:HTML5的新标签及IE5.5~9的部分兼容方案
- HTML-HTML5+CSS3权威指南阅读(五、深入理解viewport)
- html5shiv让IE也能支持HTML5标签的JavaScript兼容库
- html5+css3 权威指南阅读笔记(三)---表单及其他新增和改良元素
- html5+css3 权威指南阅读笔记(三)---表单及其它新增和改良元素
- HTML-HTML5+CSS3权威指南阅读(三、CSS选择器)
- 【html5】让 ie 支持 html5 标签
- 让IE也支持html5标签
- 解决IE(IE6/IE7/IE8)不兼容HTML5标签的问题[转自大神]
- 转一篇非常好的IE兼容文章-兼容IE6\7\8浏览器的html5标签的几个方案
- HTML5----IE低版本支持HTML5标签方法,css 浏览器网页兼容性
- IE(IE6/IE7/IE8)支持HTML5标签
- IE(IE6/IE7/IE8)支持HTML5标签
- 让IE(包括IE6)支持HTML5元素方法–html5.js
- HTML5/CSS3系列教程:HTML5基本标签使用header,nav和footer
- IE9以下浏览器支持HTML5标签的三种方法