CSS兼容處理
CSS代碼兼容主要由Hack和Filter兩種方法來解決相關問題。
Hack：一種兼容CSS在不同瀏覽器中正確顯示的方法。
Filter：一種特殊的瀏覽器或瀏覽器組顯示或隱藏規則或聲明的方法。
註意：
Hack是一種非官方技術，主要依賴各種字符組合，以及規則和聲明的重復定義實現在不同瀏覽器之間達到相同的效果。
但是Hack也有副作用，如降低代碼的可讀性，增加了代碼的負擔。
設計CSS Hack 和 Filter通常有兩種方法：
- 利用瀏覽器自身的Bug，來隱藏或顯示樣式或聲明。
- 利用瀏覽器對CSS支持的不完善，如對某些規則或語法還沒有形成支持，來隱藏或顯示樣式。
一般建議使用第二種方法來實現瀏覽器的兼容。
最新最權威的CSS Filter技術匯總：http://www.communis.co.uk/dithered/css_filters/css_only/index.html
顯示模式：各大瀏覽器廠商為了實現對標準網頁和傳統網頁的兼容性，分別為瀏覽器制定了幾套網頁顯示方案。
微軟從IE6.0以上版本瀏覽器嵌入了兩種顯示方案分別是：Standards Mode（標準模式）和 Quirks Mode（怪異模式）。
標準模式：瀏覽器根據W3C組織制定的標準網頁規範來顯示頁面。
怪異模式：頁面將以IE5顯示頁面的方式來呈現網頁，以保證與過去非標準網頁的兼容性。
它們最大的區別是對盒模型解析的差異。
Firefox從1.0以上版本開始支持3種顯示模式：Quirks Mode、Almost Standards Mode (幾乎標準模式)和Standards Mode。
其中Almost Standards Mode對應於IE和Opera的Standards Mode，該模式除了在處理表格方式方面有一些細微的差異之外，與標準模式基本相同。
火狐的顯示模型細節差異可以參考：http://www.mozilla.org/docs/web-developer/quirks/doctypes.html
Opera從6.0版本開始支持與IE相同的顯示模式：Quirks Mode 和 Standards Mode,關於顯示模式的細節說明可以參考：http://www.opera.com/doc/specs/doctype/。
相關文檔類型，根據文檔類型進行顯示：
HTML4.0過濾型：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
網頁將遵循W3C制定的標準進行解析。
HTML4.0嚴格型：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
HTML4.0框架型：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4.0 Frameset//EN" "http://www.w3.org/TR/REC-html40/frameset.dtd">
以及XHML1.0過渡型、XHTML1.0嚴格型、XHTML框架型3個文檔類型，但如果不給網頁定義文檔類型，IE瀏覽器會以怪異模式顯示網頁。
沒有提供文檔類型的版本：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML//EN" "http://www.w3.org/TR/html/loose.dtd">
HTML2.0版本：
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML2.0//EN">
HTML3.0版本：
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML3.0//EN">
HTML3.2版本：
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML3.2Final//EN">
註意： 本示例僅在IE6.0以上版本瀏覽器有效，其他瀏覽器不支持此示例的顯示差異。
條件過濾樣式：
語法：<!--[if IE]> <![endif]-->
詳解說明：
條件修飾關鍵字：
lte：小於或等於某個版本的IE瀏覽器。
lt：小於某個版本的IE瀏覽器。
gte：大於或等於某個版本的瀏覽器。
gt：大於某個版本的IE瀏覽器。
!：不等於某個版本的IE瀏覽器。
相關示例：
<!--[if IE5.0]>
<h1>只有IE5.0可以識別</h1>
<![endif]-->
<!--[if IE5]>
<h1>僅IE5.0和IE5.5可以識別</h1>
<![endif]-->
<!--[if IE6]>
<h1>僅IE6可以識別</h1>
<![endif]-->
<!--[if it IE6]>
<h1>IE6以及IE6以下版本可以識別</h1>
<![endif]-->
<!--[if IE5.5000]>
<h1>只有IE5.5可以識別</h1>
<![endif]-->
<!--[if gte IE6]>
<h1>IE6及以上版本可以識別</h1>
<![endif]-->
<!--[if IE7]>
<h1>僅IE7可以識別</h1>
<![endif]-->
<!--[if it IE7]>
<h1>IE7以及IE7以下版本可以識別</h1>
<![endif]-->
<!--[if gte IE7]>
<h1>IE7以及IE7以上版本可以識別</h1>
<![endif]-->
如果為某個版本的IE瀏覽器定義樣式，則可以把樣式放置在IE條件語句中。
例如：
<!--[if IE6]>
<style type="text/css">
body {
background：#00FFFF;
}
</style>
<![endif]-->
同時還可以為不同版本瀏覽器定義不同的外部樣式表，再用IE條件語句為不同版本的IE瀏覽器導入不同的文件，從而實現瀏覽器的兼容性處理。
如：
<!--[if IE6]>
<link href="image/ie6.css" rel="stylesheet" type="text/css">
<![endif]-->
<!--[if IE7>
<link href="image/ie6.css" rel="stylesheet" type="text/css">
<![endif]-->
提示：利用IE條件語句可以設計專門為非IE瀏覽器使用的條件語句（請註意其特殊寫法）。
<!--[if ！IE]>
<h1>除IE外都可識別</h1>
<![endif]-->
選擇器過濾樣式：
- 使用!important提升優先級：IE6以及以下版本的瀏覽器無法識別，IE7無法使用這種方法 。
- 使用下劃線屬性名：在IE7中被視為自定義屬性，在CSS中無法識別並應用在IE7以上瀏覽器。IE6及以下版本可以識別。
- 使用*html選擇符：在IE7瀏覽器中被忽略，專用於IE6及以下版本瀏覽器。
在標準網頁中，html元素被認為根元素，其他元素都被包括其中。但是在IE6及以下版本的瀏覽器中默認一個匿名根元素，html元素被認為是它的子元素。
過濾聲明：
- 隱藏單個聲明：
IE6環境，如：
div {
width：200px;
width/**/：400px;
}
註意，註釋的位置是在屬性的後面，冒號的前面，且與屬性名中間隔一個空格。
IE5.5環境，如：
div {
width：200px;
width： /**/400px;
}
註意，註釋的位置是在冒號的後面，且與冒號中間隔一個空格。
IE5環境，如：
div {
width：200px;
width/* */：400px;
}
註意，註釋的位置是在屬性名的後面，冒號的前面，且註釋中間隔一個空格。這個過濾器同時會適應Mac系統中的IE5和IE4。
如：
div {
width：200px;
width/**/：400px;
}
它不僅適用上面系統中的IE版本，也適用IE5.2/OS操作系統的瀏覽器版本。
- 隱藏多個聲明：
利用voice-family屬性設計兼容IE5.5及更低版本瀏覽器的聲明。
如：
div,content {
height：400px;
width：400px;
border：solid 1px blue;
voice-family："\"}"\";
voice-family：inherit;
height：200px;
width：200px;
border：solid 1px red;
}
註意：
voice-family屬性可以指定網頁內容用哪種聲音進行朗讀，適用於盲人閱讀器等設備上。
IE5.5及更低版本瀏覽器中由於不能夠識別，同時錯誤解析轉義字符，並認為到voice-family："\"}"\";這句結束。
其他瀏覽器中顯示為200像素的紅色框。
- 使用推薦過濾器：
IE6及更低版本專用：
*html #Element {
color：red;
...
}
IE7版本專用：
*+html #Element {
color：red;
...
}
IE7+及符合現代標準瀏覽器專用：
div>#Element {
color：red;
...
}
非IE現代標準瀏覽器專用：
html>/**/body #Element {
color：red;
...
}
\9：選擇IE6+
\0：選擇IE8+和Opera15以下的瀏覽器
如：
.test {
color: #090\9; /* For IE8+ */
*color: #f00; /* For IE7 and earlier */
_color: #ff0; /* For IE6 and earlier */
}使用檢測工具：
W3C CSS驗證服務：http://jigsaw.w3.org/css-validator/
Web Developer工具下載地址：http://chrispederick.com/work/webdeveloper。
CSS兼容處理