针对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; /* IE 8+ */
    property: value19; /* 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: value9; }

IE8/IE9/IE10均可识别

.Selector{margin-left:-2px}【IE8/IE9/IE10均可识别】

“9″ IE9/IE10均可识别“9”

.Selector{margin-left:-2px9}【IE9/IE10均可识别9】

只有IE9识别的hack

:root .Selector{margin-left:09}【只有ie9可识别:root】

针对火狐浏览器

@-moz-document url-prefix(){
    .selector{
       
    }
}