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兼容處理