在很多时候,前端的兼容性问题,都很让人头痛!幸运的是,微软从去年声明:从2016年1月12日起,微软将停止为IE8(包括IE8)提供技术支持和安全更新。整个前端圈子都沸腾起来,和今年七月份Adobe宣布计划终结 Flash一样,都是IT届的头等大喜事。
但针对一些还在用IE的人来说,或者一些故意刁难问IE兼容的HR来说,确实是个难题,这里列举一些兼容的方法
第一种,比较笨,但很有效果:条件注释
注释内容以样式为例,如下:
1、支持所有IE浏览器
2、支持非IE浏览器
或
3、仅仅支持IE10
4、仅仅支持IE9
............只想支持单一的某个IE版本,就和上述方法一样
5、支持IE10以下版本(IE9以及IE9以下版本)
这种方法是样式表使用在低于IE10的浏览器,换句话说除了IE10以外的所有IE版本都将被支持。
也可以写成
前面我们也说过了lt和lte的区别,lt表示小于版本号,不包括条件版本号本身;而lte是小于或等于版本号,包括了版本号自身。
6、支持IE9以下版本(IE8以及IE8以下版本)
或:
............只想支持某个IE版本以下的方法,就和上述方法一样
上面8——11这几种方法,使用的是低于(lt)和低于或等于(lte)的方法来判断,我们也可以使用大于(gt)和大于或等于(gte)达到上面的效果:
7、高于IE9的版本(IE10以及IE10以上版本)
或:
............只想支持某个IE版本以上,就和上述方法一样
9、高于IE5.5的版本(IE6以及IE6以上版本)
或:
注:以上 内容来自浏览器兼容之旅的第一站:如何创建条件样式 ,转载请注明,谢谢...
以上内容转载并选择摘录内容
对上文的一点补充:
10、指定多种IE版本
第二种,使用hack技术,妥妥的,比较,每次判断都重新写内容,特别的麻烦,这时,针对css兼容的hack技术出行了(以下内容为原创)
例子1:
_background-color:green;/*给IE6用的*/
* /*给IE6/7用的*/
/*给IE8-11 用的*/
/*给IE 6-10用的*/
width:400px\9;/*以上的hack技术几乎适用于所有属性*/
例子2:
块级元素的inline-block 在IE6/7下无效
解决:1.不用
2.添加 *display:inline * zoom:1;
并在一行的时候尽量不要使用
例子3:
IE6下会出现出现双倍边距问题
同方向浮动margin会产生双边距
解决:给浮动元素添加属性 display:inline
例子4:
图片存在下边距问题
在任何图片下都会有3px的间距
解决方法:1.给图片添加display:block;
2.给图片添加vertical-align:top (| middle | bottom)
例子5:
高版本的input表单中的默认图标
/*
css-hack技术解决高版本IE默认图标问题
*/
::-ms-clear{ display:none; }/*text input表单*/
::-ms-reveal{ display:none; }/*password input表单*/
例子6:
/*
定位属性的单像素问题
在IE6中如果绝对定位的参考元素(有定位属性的父级)
是单数的情况下
解决:1.不要使用单数
2.使用css-hack技术:_属性:值 给IE6使用
*/
例子7:
/*
li中有元素具有浮动属性时 会产生下边距
解决:给li元素元素标签添加属性vertical-align:top
*/
例子8:
#以上代码告诉IE浏览器,无论是否用DTD声明文档标准,IE8/9都会以IE7引擎来渲染页面。
#以上代码告诉IE浏览器,IE8/9都会以IE8引擎来渲染页面。
#以上代码IE=edge告诉IE使用最新的引擎渲染网页,chrome=1则可以激活Chrome Frame.
最后,还有就是css3新属性中一些不稳定的属性值,应该在前面添加前缀
-webkit- 属于chrome浏览器和safari浏览器的私有属性,也是浏览器内核
-moz- 属于firefox的私有属性
-ms- 属于IE浏览器的私有属性
-o- 属于opera的私有属性
当然,除了以上的css的兼容方法,一定还有很多我不为所知的更好的兼容方法。希望知道的大神都能留下你们的足迹和你们所知道的方法,谢谢!!
文章来自:http://www.cnblogs.com/itdansan/p/8016206.html