CSS Hack技術解決多瀏覽器兼容問題

作者：haiker 2010-09-16 13:48:15

CSS Hack就是指我們為了兼容各瀏覽器，而使用的特別的CSS定義技巧，我們在用DIV+CSS制作網頁時，由于不同的瀏覽器，對CSS的支持及解析結果不一樣，得不到我們所需要的頁面效果。

本文向大家描述一下如何使用CSS Hack技巧解決DIV+CSS布局多瀏覽器兼容問題，針對不同的瀏覽器寫不同的CSS代碼的過程，就叫CSS Hack，相信本文介紹一定會讓你有所收獲。

CSS Hack技巧匯總

CSS Hack簡介

我們在用DIV+CSS制作網頁時，由于不同的瀏覽器，比如InternetExplorer6,InternetExplorer7,MozillaFirefox等對CSS的支持及解析結果不一樣，導致生成的頁面效果不一樣，得不到我們所需要的頁面效果。這時候我們就需要針對不同的瀏覽器去寫不同的CSS，讓它能夠同時兼容不同的瀏覽器，能在不同的瀏覽器中也能得到我們想要的頁面效果。這個針對不同的瀏覽器寫不同的CSS代碼的過程，就叫CSS Hack。

為了向你展示這些CSS Hack是否正常運作，我新建六個P標簽，并給每一個P標簽一個特有的id。這將向你展示CSS Hack的運作情況。

<pidpid="opera">我來自Opera7.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標簽默認都不顯示

<styletypestyletype="text/css"> 
bodyp{display:none;}  
</style>

使用IE CSS條件注釋區分IE瀏覽器

最簡單的區分IE瀏覽器的方法自然是使用他們的條件注釋。微軟創建了一個強大的語法來讓我們去實現這個功能。我不想再詳細地介紹IE條件注釋了，我想你在搜索引擎能搜索到上萬個搜索條目，我這里只要這兩個：

<!--[ifIE7]> 
<styletypestyletype="text/css"> 
</style> 
<![endif]--> 
 
<!--[ifIE6]> 
<styletypestyletype="text/css"> 
</style> 
<![endif]-->

#p#使用CSS解析器Hacks區分IE

雖說IE條件注釋十分簡單好用，但是如果你想把全部的CSS放到一個文件里的話，那么你不得不使用別的方法。注意這里的IE7Hack將只對IE7有效，因為IE6根本不知道>選擇符。同時你也得注意>選擇符對于其他瀏覽器同樣是無效的。

/*IE7*/  
html>body#ie7  
{*display:block;}  
 
/*IE6*/  
body#ie6  
{_display:block;}

CSS Hack區分Firefox

***個使用了body:empty來區分Firefox1和2。第二個hack使用了全部Firefox瀏覽器的專有擴展-moz。-moz只對Firefox有效，使用這個Hack大可不必擔心其他瀏覽器的影響。

/*Firefox1-2*/  
body:empty#firefox12  
{display:block;}  
 
/*Firefox*/  
@-moz-documenturl-prefix()  
{#firefox{display:block;}}

CSS Hack區分Safari

Safari的CSS Hack與Firefox的hack看起來很像，使用的是Safari瀏覽器的專有擴展-webkit且只對Safari瀏覽器有效。

/*Safari*/  
@mediascreenand(-webkit-min-device-pixel-ratio:0)  
{#safari{display:block;}}

#p#CSS Hack區分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">我來自Opera7.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驗證，所以還得自己權衡是否有必要去使用。

【編輯推薦】

兼容IE6,IE7,IE8,Firefox的CSS HACK寫法
CSS display:inline和float:left兩者區別
CSS HACK區別IE6、IE7、IE8、Firefox兼容性
JS在IE和Firefox兼容性問題及解決方案
IE8瀏覽器中正式版CSS hack技術用法

責任編輯：佚名來源： javaeye.com

CSS Hack