1.IE條件註釋法
因爲IE瀏覽器在CSS的解析上存在很多問題,所以絕大多數的CSS hack都是針對IE進行的。
如果我們想針對IE引入一個CSS文件,
<!--[if IE]>
<link type="text/css" href="test.css" rel="stylesheet">
<![endif]-->
如果我們想針對某個範圍以內版本的IE進行hack,可以結合lte,lt,gte,gt,!等關鍵字來註釋。lte表大於等於 lt表小於 gte表大於等於 gt 表大於 !表不等於
<!--[if gt IE 6]>
<link type="text/css" href="test.css" rel="stylesheet">
<![endif]-->
當瀏覽器版本號大於6時,會加載test.css
事實上,條件註釋最常用於CSS的hack,但他能包含的內容其實不僅僅是link標籤,還可以用這樣的形式來進行hack
<!--[if IE 6]>
<style type="text/css">
.test { }
</style>
<![endif]-->
也可以對JS進行hack
<!--[if IE 6]>
<script type="text/javascript">
alert("我是IE 6");
</script>
<![endif]-->
2.選擇符前綴法
選擇符前綴法的原理是在CSS選擇符前加一些只有特定瀏覽器才能識別的前綴,從而讓某些樣式只對特定瀏覽器生效。如 “*html”前綴只對IE6生效,"*+html"前綴只對IE7生效。
<style type="text/css">
.test {width:80px;} /*IE6,IE7,IE8*/
*html .test{width: 60px;} /*only for IE 6*/
*+html .test{width: 60px;} /*only for IE 7*/
在向後兼容性上存在一定風險。
3.樣式屬性前綴法
樣式屬性前綴法的原理是在樣式的屬性名前加前綴,這些前綴只在特定瀏覽器下才生效。
例如“_”只在IE 6下生效,"*"在IE6 和IE7下生效
<style type="text/css">
.test{width:80px;*width:70px;_width:60px;}
樣式屬性前綴法也可以用在內聯樣式上。
<div class="test" style="width:80px;*width:70px;_width:60px;"></div>
雖然IE條件註釋法在理論上是首推的hack方法,但因爲他不利於開發和維護,所以事實上最流行的是選擇符前綴法和樣式屬性前綴法。