css HACK

CSS hack是经过在CSS样式中加入一些特殊的符号，让不一样的浏览器识别不一样的符号
（什么样的浏览器识别什么样的符号是有标准的，CSS hack就是让你记住这个标准），以达到应用不一样的CSS样式的目的，

好比.kwstu{width:300px;_width:200px;}
通常浏览器会先给元素使用width:300px;的样式，紧接着后面还有个_width:200px;
因为下划线_width只有IE6能够识别，因此此样式在IE6中实际设置对象的宽度为200px，后面的把前面的给覆盖了，
而其余浏览器不识别_width不会执行_width:200px;这句样式，因此在其余浏览器中设置对象的宽度就是300px;

CSS hack用来解决有些css属性在不一样浏览器中显示的效果不同的问题，

如margin属性在ie6中显示的距离会比其余浏览器中显示的距离宽2倍，也就是说margin-left:20px;在ie6中距左侧对象的实际显示距离是40px，而在非ie6中显示的距左侧对象的距离是设置的值20px;

因此要想设置一个对象距离左侧对象的距离在全部浏览器中都显示是20px的宽度的样式应为：.kwstu{margin-left:20px;_margin-left:20px;}。

从上图能够分析出如下几种状况：

1.大部分特殊字符IE浏览器支持，其余主流浏览器firefox，chrome，opera，safari不支持 (opera可识别除外)。

2.\9    ：全部IE浏览器都支持

3._和-  ：仅IE6支持

4.*     ：IE六、E7支持

5.\0    ：IE八、IE9支持，opera部分支持

6.\9\0  ：IE8部分支持、IE9支持

7.\0\9  ：IE八、IE9支持

因此咱们能够把顺序写成这样：（这也是兼容各大主流游览器的汇总）

.element{

　　color:#000;             /*w3c标准*/

　　[;color:#f00;];         /*Webkit(chrome和safari)*/

　　color:#666\9;           /*IE8*/

　　*color:#999;            /*IE7*/

　　_color:#333;            /*IE6*/

}
　　:root .element{color:#0f0\9;}  /*IE9*/

　　@media all and (-webkit-min-device-pixel-ratio:10000), not all and (

　　-webkit-min-device-pixel-ratio:0) { 
　　　　.element{color:#336699;}
　　}  /*opera*/

　　@-moz-document url-prefix(){
　　　　.element{color:#f1f1f1;}
　　} /*Firefox*/

select:after {
　　content:”.”;
　　display:block;
　　height:0;
　　clear:both;
　　visibility:hidden;
}