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

现在使用谷歌浏览器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）了解更多

[广告]赞助链接：

四季很好，只要有你，文娱排行榜：https://www.yaopaiming.com/
让资讯触达的更精准有趣：https://www.0xu.cn/