针对IE及其它的css hack

现在一些针对针对政府的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{

    }

}