現在使用谷歌瀏覽器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加上注釋，這樣才能熟記于心，希望大家找到適合自己的方法。

轉載于:https://www.cnblogs.com/mrcoke/articles/2544760.html

總結

以上是生活随笔為你收集整理的针对谷歌浏览器Chrome的CSS hack的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。