CSS Hack就是指我們?yōu)榱思嫒莞鳛g覽器，而使用的特別的CSS定義技巧，我們在用DIV+CSS制作網(wǎng)頁時，由于不同的瀏覽器，對CSS的支持及解析結(jié)果不一樣，得不到我們所需要的頁面效果。
AD：
2013云計算架構(gòu)師峰會超低價搶票中本文向大家描述一下如何使用
CSS Hack技巧解決DIV+CSS布局多瀏覽器兼容問題，針對不同的瀏覽器寫不同的CSS代碼的過程，就叫CSS Hack，相信本文介紹一定會讓你有所收獲。
CSS Hack技巧匯總
CSS Hack簡介
我們在用DIV+CSS制作網(wǎng)頁時，由于不同的瀏覽器，比如InternetExplorer6,InternetExplorer7,MozillaFirefox等對CSS的支持及解析結(jié)果不一樣，導(dǎo)致生成的頁面效果不一樣，得不到我們所需要的頁面效果。這時候我們就需要針對不同的瀏覽器去寫不同的CSS，讓它能夠同時兼容不同的瀏覽器，能在不同的瀏覽器中也能得到我們想要的頁面效果。這個針對不同的瀏覽器寫不同的CSS代碼的過程，就叫CSS Hack。
為了向你展示這些CSS Hack是否正常運(yùn)作，我新建六個P標(biāo)簽，并給每一個P標(biāo)簽一個特有的id。這將向你展示CSS Hack的運(yùn)作情況。
<pidpid="opera">我來自O(shè)pera7.2-9.5</p>
<pidpid="safari">我是神奇的Safari</p>
<pidpid="firefox">我來自Firefox</p>
<pidpid="firefox12">我是FF前輩Firefox1-2</p>
<pidpid="ie7">我是IE7</p>
<pidpid="ie6">我是殘品IE6</p>
然后我讓這些P標(biāo)簽?zāi)J(rèn)都不顯示
<styletypestyletype="text/css">
bodyp{display:none;}
</style>
使用IE CSS條件注釋區(qū)分IE瀏覽器
最簡單的區(qū)分IE瀏覽器的方法自然是使用他們的條件注釋。微軟創(chuàng)建了一個強(qiáng)大的語法來讓我們?nèi)崿F(xiàn)這個功能。我不想再詳細(xì)地介紹IE條件注釋了，我想你在搜索引擎能搜索到上萬個搜索條目，我這里只要這兩個：
<!--[ifIE7]>
<styletypestyletype="text/css">
</style>
<![endif]-->
<!--[ifIE6]>
<styletypestyletype="text/css">
</style>
<![endif]-->
使用CSS解析器Hacks區(qū)分IE
雖說IE條件注釋十分簡單好用，但是如果你想把全部的CSS放到一個文件里的話，那么你不得不使用別的方法。注意這里的IE7Hack將只對IE7有效，因為IE6根本不知道>選擇符。同時你也得注意>選擇符對于其他瀏覽器同樣是無效的。
/*IE7*/
html>body#ie7
{*display:block;}
/*IE6*/
body#ie6
{_display:block;}
CSS Hack區(qū)分Firefox
第一個使用了body:empty來區(qū)分Firefox1和2。第二個hack使用了全部Firefox瀏覽器的專有擴(kuò)展-moz。-moz只對Firefox有效，使用這個Hack大可不必?fù)?dān)心其他瀏覽器的影響。
/*Firefox1-2*/
body:empty#firefox12
{display:block;}
/*Firefox*/
@-moz-documenturl-prefix()
{#firefox{display:block;}}
CSS Hack區(qū)分Safari
Safari的CSS Hack與Firefox的hack看起來很像，使用的是Safari瀏覽器的專有擴(kuò)展-webkit且只對Safari瀏覽器有效。
/*Safari*/
@mediascreenand(-webkit-min-device-pixel-ratio:0)
{#safari{display:block;}}
CSS Hack區(qū)分Opera
/*Opera*/
@mediaalland(-webkit-min-device-pixel-ratio:10000),
notalland(-webkit-min-device-pixel-ratio:0)
{head~body#opera{display:block;}}
然后，全部合在一起便是完整代碼：
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<htmllanghtmllang="en">
<head>
<metahttp-equivmetahttp-equiv="Content-Type"content="text/html;charset=utf-8">
<title>CSSBrowserHacks</title>
<styletypestyletype="text/css">
bodyp
{
display:none;
}
/*Opera*/
html:first-child#opera
{
display:block;
}
/*IE7*/
html>body#ie7
{
*display:block;
}
/*IE6*/
body#ie6
{
_display:block;
}
/*Firefox1-2*/
body:empty#firefox12
{
display:block;
}
/*Firefox*/
@-moz-documenturl-prefix()
{
#firefox{display:block;}
}
/*Safari*/
@mediascreenand(-webkit-min-device-pixel-ratio:0)
{
#safari{display:block;}
}
/*Opera*/
@mediaalland(-webkit-min-device-pixel-ratio:10000),
notalland(-webkit-min-device-pixel-ratio:0)
{
head~body#opera{display:block;}
}
</style>
</head>
<body>
<pidpid="opera">我來自O(shè)pera7.2-9.5</p>
<pidpid="safari">我是神奇的Safari</p>
<pidpid="firefox">我來自Firefox</p>
<pidpid="firefox12">我是FF前輩Firefox1-2</p>
<pidpid="ie7">我是囧IE7</p>
<pidpid="ie6">我是殘品IE6</p></body>
</html>
CSS Hack雖好且方便兼容各瀏覽器，但是通不過W3C驗證，所以還得自己權(quán)衡是否有必要去使用。
