睡蓮‧池水間

一、IE條件注釋
1）針對某個具體IE版本應用樣式表文件

由於IE5.5的版本號有點特殊，定義時應寫成IE 5.5000

2）針對所有IE版本應用樣式表文件

3）針對一定範圍IE版本應用樣式表文件

如果要實現在一定版本範圍內IE瀏覽器中有效，可以結合lte、lt、gte、gt 和!關鍵字，指明一個使用範圍，詳細說明如下：

lte：Less than or equal to 的簡寫，也就是小于或等于的意思。
lt：Less than 的簡寫，也就是小于的意思。
gte：Greater than or equal to 的簡寫，也就是大于或等于的意思。
gt：Greater than 的簡寫，也就是大于的意思。
!：不等於的意思。

二、@import規則過濾器
/*僅適用IE 5.x/Windows版本瀏覽器*/
@media tty{
i{content:"\";/*" "*/}} @import url('ie5x/win.css'); /*;)
}/* */
CSS1不能夠識別@media規則，則那些僅能夠支持CSS1的瀏覽器會自動忽略這幾行代碼。
tty表示終端和電傳打字機媒體類型，當前沒有設備支持這種媒體類型，符合標準的瀏覽器會忽略這個規則，如FF、OP等。
功能超前的瀏覽器會誤認為是為i元素定義的樣式，由于對轉義字符的曲解而認為中間是一堆無意義的字符串。
但是IE 5.x/Windows系列版本瀏覽器不能夠識別轉義字符，也不支持tty媒體類型，因此會忽略前面的聲明，而執行後半部分的規則。

1）適用IE 5/Windows瀏覽器的過濾器
/*僅適用IE 5/Windows瀏覽器*/
@media tty{
i{content:"\";/*" "*/}}; @import 'ie5/win.css'; {;}/*";}
}/* */

2）適用IE 5.5/Windows瀏覽器的過濾器
/*僅適用IE 5.5/Windows瀏覽器*/
@media tty{
i{content:"\";/*" "*/}}@m; @import 'ie55/win.css'; /*";}
}/* */

3）適用IE 5/Mac瀏覽器的過濾器
/*僅適用IE 5/Mac版本瀏覽器*/
/*\*//*/
@import " ie5mac.css";
/**/

4）適用非IE 6/Windows及更低版本瀏覽器
/*適用非IE 6/Windows及更低版本瀏覽器*/
@import url(styles.css) all;

5）適用非IE 5.x/Windows系列及更低版本瀏覽器
/*適用非IE 5.x/Windows系列及更低版本瀏覽器*/
@import "null?\"\{";
@import "styles.css";
@import "null?\"\}";

6）適用非IE 5/Windows系列及更低版本瀏覽器
/*適用非IE 5/Windows系列及更低版本瀏覽器*/
@import"styles.css";

7）適用非IE 4/Windows版本瀏覽器
/*適用非IE 4/Windows版本瀏覽器*/
@import"styles.css";

三、!important關鍵字過濾器
/*[!important關鍵字過濾器]*/
#content{
width:414px !important;
width:400px;
padding:5px;
border-width:2px;
}
FF和OP能夠識別!important命令，IE6及更低版本瀏覽器忽略!important命令。

四、下劃線屬性過濾器
/*[下劃線屬性過濾器]*/
#content{
width:400px;
_width:414px;
padding:5px;
border-width:2px;
}
Windows IE 6及更低版本瀏覽器會忽略下劃線。

五、轉義屬性過濾器
/*[轉義屬性過濾器]*/
div{
border:solid 1px red;
height:100px;
width:100px;
widt\h:200px;
}
Windows IE 5.x系列及更低版本瀏覽器會忽略"\"。
注：不要把反斜槓放在數字0-9或字母a-f、n、r、t、v（包括大小寫）的前面。

/*[轉義屬性過濾器]*/
div{
border:solid 1px red;
height:100px;
width:100px;
\width:200px;
}
能隱藏NS 4/Win或NS 4/Mac、IE 5/Mac版本瀏覽器中的聲明。

六、* html選擇符過濾器
/*[* html選擇符過濾器]*/
* html{/*定義在IE 6及更低版本中顯示的字體為灰色*/
color:#666;
}

七、屬性選擇符過濾器
/*[屬性選擇符過濾器]*/
div.try{/*適用所有瀏覽器的樣式*/
width:204px;
height:304px;
padding:2px;
}
div[class=try]{/*在非IE 6及更低版本瀏覽器中覆蓋上面定義的寬和高聲明，實現盒模型兼容*/
width:200px;
height:300px;
}

八、子對象選擇符過濾器
/*子對象選擇符過濾器*/
span>p{/*符合標準的瀏覽器中顯示為白色*/
color:#FFF;
}
span{/*IE 6及更低版本瀏覽器中顯示為黑色*/
color:#000;
}

九、相鄰選擇符過濾器
/*[相鄰選擇符過濾器]*/
h2 + parag{/*符合標準瀏覽器中顯示為藍色*/
color:blue;
}
.parag{/*IE 6及更低版本瀏覽器中顯示為紅色*/
color:red;
}

十、轉義選擇符過濾器
/*[轉義選擇符過濾器]*/
#testElement{/*IE 5.x系列版本瀏覽器中顯示為藍色*/
color:blue;
}
#te\stElement{/*在非IE 5.x系列版本瀏覽器中顯示為紅色*/
color:red;
}

十一、注釋反斜槓過濾器
/*[注釋反斜槓過濾器]*/
div{
width:774px;
}
/*Hide Code for IE 5/Mac \*/
div{
width:100%;
}
/* End Hide */

十二、隱藏單個聲明
1）在IE 6中隱藏聲明
/*[在IE 6中隱藏聲明]*/
div{
height:200px;
width:200px;
width /**/:400px;
background:#F6F;
}
注：注釋在屬性的後面，冒號的前面，且與屬性名中間隔一個空格。

2）在IE 5.5中隱藏聲明
/*[在IE 5.5中隱藏聲明]*/
div{
height:200px;
width:200px;
width: /**/400px;
background:#F6F;
}
注：注釋在冒號的後面，且與冒號中間隔一個空格。

3）在IE 5和IE 4中隱藏聲明
/*[在IE 5和IE 4中隱藏聲明]*/
div{
height:200px;
width:200px;
width/* */:400px;
background:#F6F;
}
注：注釋在屬性名的後面，冒號的前面，且注釋中間隔一個空格。
這個過濾器會同時適用Mac系統中的IE 5和IE 4。

十三、隱藏多個聲明
/*[在IE 5.5及更低版本瀏覽器中隱藏聲明]*/
div.content{
height:400px;
width:400px;
border:solid 1px blue;
voice-family:"\"}\"";
voice-family:inherit;
height:200px;
width:200px;
border:solid 1px red;
}
IE 5.5及更低版本瀏覽器中不能夠識別voice-family屬性，同時錯誤地解析轉義字符，誤認為規則到voice-family:"\"}\"";就結束了。

十四、隱藏規則
1）在IE 5和IE 4中隱藏規則
/*[在IE 5和IE 4中隱藏規則]*/
div.content{
height:400px;
width:400px;
background:red;
}
div.content/**/{
background:blue;
}
IE 5和IE 4會隱藏第2個規則。這個過濾器同時適用Mac系統中的IE 5和IE 4。

2）在IE 6及更低版本中隱藏規則
/*[在IE 6及更低版本中隱藏規則]*/
div.content{
height:400px;
width:400px;
background:red;
}
div.content ,[dummy]{
background:blue;
}
IE 6及更低版本中忽略第2個規則。

3）在IE 6及更低版本中隱藏規則
/*[在IE 6及更低版本中隱藏規則]*/
div.content{
height:400px;
width:400px;
background:red;
}
head+body div.content{
background:blue;
}