針對谷歌瀏覽器Chrome的CSS hack

現在使用谷歌瀏覽器Google Chrome的用戶越來越多，所以在制作網頁時也應考慮到Chrome瀏覽器的兼容性。雖然在原來的CSS hack的原理文章中提到過如何用CSS hack區分Chrome瀏覽器、Safari瀏覽器和Opera瀏覽器，但這次還是要單獨再講一次。 

CSS Hack瀏覽器兼容性對照表 來源：centricle.com

[ 點擊放大]

針對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加上注釋，這樣才能熟記於心，希望大家找到適合自己的方法。