下面是我收集有關於各瀏覽器下hack的寫法
1、firefox
@-moz-document url-prefix() }
上面是僅僅被firefox瀏覽器識別的寫法，具體如：
@-moz-document url-prefix() }
支援firefox的還有幾種寫法：
/* 支援所有firefox版本 */ #selector[id=selector] 或者： @-moz-document url-prefix() } /* 支援所有gecko核心的瀏覽器 (包括firefox) */ *>.selector
2、webkit枘核瀏覽器(chrome and safari)
@media screen and (-webkit-min-device-pixel-ratio:0) }
上面寫法主要是針對webkit核心的瀏覽器，如google chrome 和 safari瀏覽器：
@media screen and (-webkit-min-device-pixel-ratio:0) }
3、opera瀏覽器
html:first-child>body selector 或者： @media all and (min-width:0) } 或者： @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) }
上面則是opera瀏覽器的hack寫法：
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) }
4、ie9瀏覽器
:root selector
上面是ie9的寫法，具體應用如下：
:root .demo
5、ie9以及ie9以下版本
selector
這種寫法只有ie9以及ie9以下版本能識別，這裡需要注意此處「9」只能是「9」不能是別的，比如說「8」，不然會失去效果的，如：
.demo
6、ie8瀏覽器
selector 或者： @media �screen }
上面寫法只有ie能識別，如：
.color 或者： @media �screen }
7、ie8以及ie8以上的版本
selector
這種寫法只有ie8以及ie8以上版本支援，如
.demo
8、ie7瀏覽器
*+html selector 或 *:first-child+html selector
上面兩種是ie7瀏覽器下才能識別，如：
*+html .demo 或者： *:first-child+html .demo
9、ie7及ie7以下版本瀏覽器
selector
上面的寫法在ie7以及其以下版本都可以識別，如：
.demo
10、ie6瀏覽器
selector 或者： selector 或者： *html selector
具體應用如下：
.demo 或者： .demo 或者： *html .demo
上面具體介紹了各種版本瀏覽器下如何識別各種的hack寫法，包括了ie6-9以及現代版本的瀏覽器寫法。綜合上面的所述，我們針對不同瀏覽器的hack寫法主要分為兩種從css選擇器和css屬性上來區別不同的hack寫法。下面我們分別來看這兩種的不同寫法：
css選擇器的hack寫法
下面我們主要來看css選擇器和css屬性選擇器在不同瀏覽器的支援情況。下面先來看css選擇器支援情況。
css選擇器的hack寫法
1、ie6以及ie6以下版本瀏覽器
* html .demo
2、僅僅ie7瀏覽器
*:first-child+html .demo
3、除ie6之外的所有瀏覽器（ie7-9, firefox,safari,opera）
html>body .demo
4、ie8-9,firefox,safari,opear
html>/**/body .demo
5、ie9+
:root .demo
6、firefox瀏覽器
@-moz-document url-prefix() }
6、webkit核心瀏覽器（safari和google chrome）
@media screen and (-webkit-min-device-pixel-ratio:0) }
7、opera瀏覽器
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) }
8、iphone / mobile webkit
@media screen and (max-device-width: 480px) }
css屬性hack寫法
1、ie6瀏覽器
.demo
2、ie6-7瀏覽器識別
.demo
3、所有瀏覽器除ie6瀏覽外
.demo
4、ie6-9瀏覽器
.demo
5、ie7-8瀏覽器
.demo
上面羅列的都是各種瀏覽器下的有關於css的hack的寫法，基中有針對於現代瀏覽器safari,google chrome和firefox的寫法，而且也有針對於我們前端人員最討厭的ie6-9的各版本瀏覽器的hack的寫法，而且這些hack我們又分為css選擇器的hack寫法和css屬性的hack寫法。然而具體何種適用，大家可以要據自己的需求來定，下面列出我個人的兩種寫法：
一、經濟實惠型定法：
這種寫法注重單獨的css的hack寫法。不同的瀏覽器使用不同的hack寫法，其實也只是以ie的hack寫法比較多（因為我們寫hack也主要是針對ie的瀏覽器）特別是ie6下的瀏覽器。單獨為各種瀏覽器寫hack的好處是：針對各種瀏覽順的hack寫法省力易記。因為其他的瀏覽器主要是針對現代瀏覽器，相對來說是比較少的。針對於這種hack的使用，我推薦使用下面的方法：
.demo @media all and (min-width:0px) @media screen and (-webkit-min-device-pixel-ratio:0) @media all and (-wekit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) /*opera*/ } @-moz-document url-prefix()/* all firefox */ }
二、完美主義寫法
這種方法是追求完美主義的寫法，主要是配合我們上一節所說的ie條件注釋，全部採用選擇器hack的寫法。這種寫法分兩步：
1、建立條件樣式表，並在html中body裡新增相應的class類名：
<
2、接著建立對應的樣式
.demo /*現代瀏覽器*/ .non-ie .demo /*除ie外瀏覽器*/ .ie9 .demo /*ie9瀏覽器*/ .ie8 .demo/*ie8瀏覽器*/ .ie7 .demo /*ie7瀏覽器*/ .ie6 .demo /*ie6瀏覽器*/ @media all and (min-width: 0px) /* webkit and opera */ } @media screen and (-webkit-min-device-pixel-ratio:0)/* webkit */ } @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) /* opera */ } @-moz-document url-prefix()/* firefox * / }
上面就是目前各種瀏覽器下，相關css的hack的寫法，下面我們具體來看乙個例項：
html markup
test color
css code
.demo :root .demo @-moz-document url-prefix()/* all firefox */ } @media screen and (-webkit-min-device-pixel-ratio:0) /*webkit*/ } @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) /*opera*/ }
各瀏覽器CSS hack
區別 ie6與 ff background orange background blue 區別 ie6與 ie7 background green important background blue 區別 ie7與 ff background orange background green 區別 f...
css hack, 瀏覽器 選擇
ie6以下 html ie 7 以下 first child html html 只對ie 7 first child html 只對ie 7 和現代瀏覽器 html body 只對現代瀏覽器 非ie 7 html body 最新的opera 9以下版本 html first child safar...
css hack, 瀏覽器 選擇
ie6以下 html ie 7 以下 first child html html 只對ie 7 first child html 只對ie 7 和現代瀏覽器 html body 只對現代瀏覽器 非ie 7 html body 最新的opera 9以下版本 html first child safar...