CSS hack技術簡介_CSS

1.IE條件注釋法：

 <!--{if ie}><link type="text/css" href="test.css" rel="stylesheet"/><!{endif}-->

CSS檔案test.css就只載入到IE瀏覽器了，對於非IE瀏覽器就會忽略這一點

 <!--{if IE 6}><link type="text/css" href="test.css" rel="stylesheet"/><!{endif}-->

針對特定版本的瀏覽器載入CSS檔案

針對某個範圍內版本的IE進行hack,可以結合lte（小於等於）,lt（小於）,gte（大於等於）,gt（大於）,!（不等於）等關鍵字來進行注釋

樣本：只對IE6以上版本生效

 <!--{if gt IE 6}><link type="text/css" href="test.css" rel="stylesheet"/><!{endif}-->

只在IE7上不生效

 <!--{if  !IE 7}><link type="text/css" href="test.css" rel="stylesheet"/><!{endif}-->

條件注釋能包含的內容不僅是link標籤，還可以用如下的樣式來進行hack

<!-- {if  IE 6}><style type="text/css">.test{margin-top:20px}</style><!{endif}-->

可以進行一些js的hack,如下面代碼所示：

<!--{if IE 6}><script type="text/javascript">   alert('我是 IE 6')</script><!{endif}-->

優點：IE條件注釋是微軟官方推薦的hack方式，從向前相容性方面考慮，是最安全的hack方式

缺點：將同一CSS選擇符下的樣式分散到三個檔案中去控制，增加了開發和維護的成本

2.選擇符首碼法：

原理：在CSS選擇符前面加一些只有特定瀏覽器才能識別的首碼，從而讓某些樣式只對特定瀏覽器生效。例如："*html"首碼只對IE6生效，“*+html”首碼只對IE7生效

1）*：IE瀏覽器能識別*符號，但其他瀏覽器諸如：firefox,opera,chrome等不能識別

2）!important：IE7不但能識別*，還能識別!important,而IE6隻能識別前者

3）/9 IE8的專屬

4）Firefox:-moz-box-shadow

5）Safari:-webkit-box-shadow

6）Opera:-o-box-shadow

樣本

<style type="text/css">    .test{width:80px;}    *html.test{width:60px;}    *+html.test{width:70px}</style>

優點：.test的樣式可以集中起來，可維護性強，向後相容性存在風險

缺點：不能用於內嵌樣式上，比如說<div class="test" style="width:60px"></div>無法使用選擇符首碼法來hack

3.樣式屬性首碼法：

原理：在樣式的屬性名稱前加首碼，這些首碼只在特定瀏覽器下才生效。例如："_"只在IE6下生效，"*"在IE6和IE7下生效

樣本

<style type="text/css">   .test{width:80px;*width:70px;_width:60px;}</style>

優點：相比於選擇符首碼法彙總度更高，代碼更精簡，可維護性更強。可以用於內嵌樣式，比如<div class="test" style="width:80px;*width:70px;_width:60px"></div>

缺點：向後相容性存在風險，