Google Chrome的CSS hack写法

Google自从2010年9月3日推出了浏览器Google Chrome，写前端效果的同志们又得辛苦了，现在就是个浏览器混乱的时代，自从Google混进来之后，就更混乱了。

不过还好Google用的是与Safari一样的Webkit引擎，我们可以使用对Safari相似的方法解决css hack，写法是这样子的：


@medias creen and(-webkit-min-device-pixel-ratio:0){
/*针对GoogleChrome、Safari3.0、Opera9的CSS样式*/ }


示例：


@media screen and (-webkit-min-device-pixel-ratio:0) { .font1 {color:#f00} .border1 {border:1px solid #f00;} .bg3 {background:#f00;} }


另外有一种通过加#的css hack对chrome没有效果。
还有以下的css hack 语句目前只有Google Chrome他Safari3.1可以正常解释。


body:nth-of-type(1) p {color: #333333;}

关于这个hack起作用的解释如下：

每个网页只有一个body元素
body:nth-of-type(1)将匹配页面内第一个也是唯一的一个body元素
只有Safari 3.1和google chrome支持:nth-of-type伪类


除此之外，还有专门针对某个浏览器的CSS hack方法，如针对Webkit核心浏览器和Opera的写法：

/*Webkit and Opera*/ @media all and (min-width:0px){ .font1 {color:red;}


针对Opera浏览器的写法：


/*Opera*/ @media all and (-webkit-min-device-pixel-ratio:10000),not and all (-webkit-min-device-pixel-ratio:0) { .font1 {color:red;}


针对Firefox浏览器的写法：

/*Firefox*/ @-moz-document url-prefix() { .font1 {color:red} }