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

转载于:https://www.cnblogs.com/zhenzhong/p/3450712.html

Google Chrome的CSS hack写法相关推荐

区别不同浏览器，CSS hack写法
区别不同浏览器,CSS hack写法: 区别IE6与FF: background:orange;*background:blue; 区别IE6与IE7: background:green !impor ...
css ie6,ie7,ie8 兼容性写法,CSS hack写法
margin-bottom:40px; /*ff的属性*/ margin-bottom:140px\9; /* IE6/7/8的属性 */ color:red\0; ...
css ie9 打印 hack,IE9下css hack写法
ie9一出css hack也该更新,以前一直没关注,今天在内部参考群mxclion分享了IE9的css hack,拿出来也分享一下: select { background-color:red\0; ...
css hack支持ie8,仅仅 IE8 有效的 CSS hack 写法
IE8 CSS hack 就是在属性后面加上 \9 或者 \0,代码如下: color:#FFF\0; /* IE8 */ color:#FFF\9; /* 所有IE浏览器(ie6+) */ 上面的 ...
针对谷歌浏览器Chrome的CSS hack
现在使用谷歌浏览器Google Chrome的用户越来越多,所以在制作网页时也应考虑到Chrome浏览器的兼容性.虽然在原来的CSS hack的原理文章中提到过如何用CSS hack区分Chrome浏 ...
2010全面兼容IE6/IE7/IE8/FF的CSS HACK写法
这个帖子总结的很好.http://www.aa25.cn/web_w3c/868.shtml 转载于:https://www.cnblogs.com/dqg0312/archive/2011/08/0 ...
css hack 学习总结
css hack CSS hack由于不同厂商的浏览器,比如Internet Explorer,Safari,Mozilla Firefox,Chrome等,或者是同一厂商的浏览器的不同版本,如IE ...
各浏览器的Hack写法【转】
Hack是针对不同的浏览器去写不同的CSS样式,从而让各浏览器能达到一致的渲染效果,那么针对不同的浏览器写不同的CSS CODE的过程,就叫CSS HACK,同时也叫写CSS Hack.然后将Hack ...
html css hack
下面是我收集有关于各浏览器下Hack的写法 1.Firefox @-moz-document url-prefix() {.selector {property: value;}} 上面是仅仅被Fir ...

Google Chrome的CSS hack写法

Google Chrome的CSS hack写法相关推荐

最新文章

热门文章