Webkit引擎谷歌浏览器Chrome的CSS hack技巧

新闻 作者:邮箱投递 2014-07-29 03:29:44 阅读:525
现在使用谷歌浏览器Google Chrome的用户越来越多,所以在制作网页时也应考虑到Chrome浏览器的兼容性。虽然在原来的CSS hack的原理文章中提到过如何用CSS hack区分Chrome浏览器、Safari浏览器和Opera浏览器,但这次还是要单独再讲一次。   IE/FF/Opera/Safari/Google Chrome本来不太平的世界更混乱了。   所幸Google Chrome用的是与Safari一样的Webkit引擎,我们可以使用对safari相似的方式作css hack,写法为:   @media screen and (-webkit-min-device-pixel-ratio:0) { /* 针对Google Chrome、Safari 3.0、Opera 9 的CSS样式 */ } 另有一种通过附加#的Css hack对chrome无效,可能是Webkit版本不同。 此css hack无效 p.callout { color:#FF0000; font-weight:normal; } p.callout { color:#000000; font-weight:bold;# } 针对Chrome和Safari等Webkit核心浏览器的CSS hack代码: @media screen and (-webkit-min-device-pixel-ratio:0) { /* Webkit内核兼容CSS */ } 示例: @media screen and (-webkit-min-device-pixel-ratio:0) { .font1 {color:#f00} .border1 {border:1px solid #f00;} .bg3 {background:#f00;} } 除此之外,还有专门针对某个浏览器的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} }   除了添加CSS hack以外,还应该给每个CSS hack加上注释,这样才能熟记于心,希望大家找到适合自己的方法。   最后,CMSYOU在此送上:   Enjoy it!

关注公众号:拾黑(shiheibook)了解更多

[广告]赞助链接:

选择AiDeep,让人工智能为你工作:http://www.aideep.com/
四季很好,只要有你,文娱排行榜:http://www.yaopaiming.com/
让资讯触达的更精准有趣:https://www.0xu.cn/

关注网络尖刀微信公众号
随时掌握互联网精彩
赞助链接