前言

在这个浏览器百花争鸣的时代，作为前端开发的我们为了我们漂亮的设计能适应各个浏览器可为煞费苦心，主要体现在javascript和css上面。这次来看下CSS hack

为了适应不同浏览器不同的版本（版本主要就ie来说），ie这朵奇葩现在我们要兼容6-11（主要是6-9）。在ie下我们可以写条件注释来区分ie和其他浏览器，以及ie的版本。

代码

 分析

background-color:blue;        

各个浏览器都认识，这里给firefox用；

background-color:red\9;      

\9 所有的ie浏览器可识别；

background-color:yellow\0;

\0 这是留给ie8的，但发现新版opera也认识，不过后面有hack写给opera，所以\0是给ie8留的

+background-color:pink;

+ ie7使用；

_background-color:orange;      

_专门留给神奇的ie6；

:root #test { background-color:purple\9; }

:root是给ie9的

@media all and (min-width:0px){ #test {background-color:black\0;} }

这个是老是跟ie抢着认\0的神奇的opera，必须加个\0,不然firefox，chrome，safari也都认识。。。

@media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} }

最后这个用于浏览器chrome和safari

总结

特别注意以上顺序是不可以改变的。css hack虽然可以解决个浏览器之间css显示的差异问题，但是毕竟不符合W3C规范，我们平时写css最好是按照标准来，这样对我们以后维护也是大有好处的。