现在一些针对针对*的oa项目还要去解决兼容IE6 7 8,这对前端开发来说简直是灾难,在要使用一些css3,或者H5的地方,我们就要慎重了,在使用新特性的同时要兼顾老的浏览器的,做到优雅降级,或者针对不同浏览器做不同样式
首先是条件判断,
判断方式:
<!–[if !IE]><!–> 除IE外都可识别 <!–<![endif]–>
<!–[if IE]> 所有的IE可识别 <![endif]–>
<!–[if IE 6]> 仅IE6可识别 <![endif]–>
<!–[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]–>
<!–[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]–>
<!–[if IE 7]> 仅IE7可识别 <![endif]–>
<!–[if lt IE 7]> IE7以及IE7以下版本可识别 <![endif]–>
<!–[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]–>
<!–[if IE 8]> 仅IE8可识别 <![endif]–>
<!–[if IE 9]> 仅IE9可识别 <![endif]–>
再者就是针对样式表中常用的各个浏览器的css hack
针对IE6的css hack
1. *html Selector {} /* Selector 表示 css选择器 下同 */
2. Selector { _property: value; } /* property: value 表示 css 的属性名: 属性值 下同 */
针对IE7的css hack
1. *+html Selector {}/*selector 表示css选择器*/
针对IE8的css hack
Selector {
property: value1; /* W3C MODEL */
property: value2\0; /* IE 8+ */
property: value1\9\0; /* IE 9+ */
}
IE6 7 共同的css hack
1. Selector { *property: value; }
2. Selector { #property: value; }
3. Selector { +property: value; }
IE6/IE7/IE8/IE9/IE10共同的css hack
Selector { property: value\9; }
IE8/IE9/IE10均可识别\0
.Selector{margin-left:-2px\0}【IE8/IE9/IE10均可识别\0】
“\9\0″ IE9/IE10均可识别“\9\0”
.Selector{margin-left:-2px\9\0}【IE9/IE10均可识别\9\0】
只有IE9识别的hack
:root .Selector{margin-left:0\9}【只有ie9可识别:root】
针对火狐浏览器
@-moz-document url-prefix(){
.selector{
}
}