CSS hack

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方法,但因爲他不利於開發和維護,所以事實上最流行的是選擇符前綴法和樣式屬性前綴法。


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章