CSS兼容處理
CSS代碼兼容主要由Hack和Filter兩種方法來解決相關問題。css
Hack：一種兼容CSS在不一樣瀏覽器中正確顯示的方法。html
Filter：一種特殊的瀏覽器或瀏覽器組顯示或隱藏規則或聲明的方法。web
注意：瀏覽器
Hack是一種非官方技術，主要依賴各類字符組合，以及規則和聲明的重複定義實如今不一樣瀏覽器之間達到相同的效果。框架
可是Hack也有反作用，如下降代碼的可讀性，增長了代碼的負擔。工具
設計CSS Hack 和 Filter一般有兩種方法：ui
- 利用瀏覽器自身的Bug，來隱藏或顯示樣式或聲明。
- 利用瀏覽器對CSS支持的不完善，如對某些規則或語法尚未造成支持，來隱藏或顯示樣式。
通常建議使用第二種方法來實現瀏覽器的兼容。spa
最新最權威的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。
- 1. CSS 兼容處理
- 2. JS CSS兼容性處理
- 3. css兼容處理-hack
- 4. CSS兼容處理（二）
- 5. webpack 學習10 ,css 兼容性處理
- 6. CSS兼容處理的相關案例
- 7. CSS的兼容性與BUG處理
- 8. React+Webpack css語法兼容處理
- 9. Bootstrap兼容處理
- 10. 兼容性處理
- 更多相關文章...
- • 錯誤處理 - RUST 教程
- • C# 異常處理 - C#教程
- • Docker 清理命令
- • Docker容器實戰(七) - 容器眼光下的文件系統
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. CSS 兼容處理
- 2. JS CSS兼容性處理
- 3. css兼容處理-hack
- 4. CSS兼容處理（二）
- 5. webpack 學習10 ,css 兼容性處理
- 6. CSS兼容處理的相關案例
- 7. CSS的兼容性與BUG處理
- 8. React+Webpack css語法兼容處理
- 9. Bootstrap兼容處理
- 10. 兼容性處理