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-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} }