1.瀏覽器兼容問題
- 瀏覽器與前端技術的發展不匹配
- 不同瀏覽器參考的標準、實現的方式不同
2.相關參考資料
3.處理兼容問題的思路
- 要不要做
- 產品的角度（產品的受眾、受眾的瀏覽器比例、效果有限還是基本功能有先
- 成本的角度（有無必要做某件事）
- 做到什么程度
- 讓哪些瀏覽器支持哪些效果
- 如何做
- 根據兼容需求選擇技術框架、庫（jquery）
- 根據兼容需求選擇兼容工具（html5shiv.js, respond.js, css reset, nomalize.css, Modemizr）
- postCSS
- 條件注釋、CSS Hack、js能力檢測做一些修補
4. 漸進增強和優雅降級
- 漸進增強(progressive enhancement):針對低版本瀏覽器進行構建頁面，保證最基本的功能，然后再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗
- 優雅降級(graceful degradation):一開始就構建完整的功能，然后再針對低版本瀏覽器進行兼容
5. 選擇合適的框架合適的框架
- Bootstrap ( >= ie8 )
- jQuery 1.~ ( >= ie6 ), jQuery 2.~ ( >= ie9 )
- Vue ( >= ie9 )
- ...
6.條件注釋
- 條件注釋 ( conditional comment )是用于HTML源碼中被IE有條件解釋的語句。條件注釋可被用來向IE提供及隱藏代碼
- 條件注釋可以被IE 10 之前的版本解釋，IE 10 及以后不再支持條件注釋
7.CSS hack
由于不同廠商的瀏覽器，比如IE, Safari, Mozila Firefox, Chrome等，或者是同一廠商的瀏覽器的不同版本，，如IE 6, IE 10, 對于CSS的解析認識不完全一樣，因此會導致生成的頁面效果不一樣，得不到我們所需要的頁面效果。因此需要針對不同的瀏覽器去些不同的css，讓它能在不同的瀏覽器中也能得到我們想要的頁面效果
CSS Hack大致有三種表現形式，CSS屬性前綴法, 選擇器前綴法， IE條件注釋法Hack， 實際項目中CSS Hack大部分是針對IE瀏覽器不同版本之間的表現差異而引入的（利用瀏覽器的bug來進行針對性處理）
常見hack寫法
.box {
color: red; /* 所有瀏覽器都生效 */
_color: blue; /* 只有 IE 6 生效 */
*color: pink; /* 只有 IE 6 IE 7 生效 */
color: yellow\9; /* IE 6~8 都生效 */
}
< !--[if IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]-->
8.常見屬性的兼容情況
- inline-block: >=ie 8
- min-width/min-height: >=ie 8
- :before, :after: >=ie 8
- div:hover: >=ie 7
- inline-block: >=ie8
- background-size: >=ie 9
- 圓角：>= ie 9
- 陰影: >= ie 9
- 動畫、漸變： >= ie 10
9.常見兼容處理范例
.clearfix:after{
content: '';
display: block;
clear: both;
}
.clearfix{
*zoom: 1; /* 僅針對ie67有效 */
}
.target {
/* 在 IE 6，7，8上實現inline-block效果 */
display: inline-block; /* IE 8生效 */
/* 一下兩句只有在 IE 6,7 上生效，結合產生inline-block效果*/
*display: inline;
*zoom: 1;
}
<!--[if IE 7]>
<html class="ie7 no-js">
...
</html>
<![endif]-->
.clearfix {
/* 在非ie 7 瀏覽器中，clearfix展現該屬性 */
}
.ie7 .clearfix {
/* 只有ie7瀏覽器中，clearfix才會展現該屬性 */
}
10.兼容性相關的開發工具
- html5shiv.js:使用Javascript來使不支持HTML5的瀏覽器支持HTML標簽。
- respond.js: 讓不支持css3 Media Query的瀏覽器包括IE6-IE8等其他瀏覽器支持查詢。
- css reset：“樣式重置”——重置瀏覽器默認樣式
- Normalize.css:在默認的HTML元素樣式上提供了跨瀏覽器的高度一致性。相比于傳統的CSS reset，Normalize.css是一種現代的、為HTML5準備的優質替代方案。
- Modernizr：一個 JavaScript 庫，用于檢測用戶瀏覽器的 HTML5 與 CSS3 特性。Modernizr 會在頁面加載后立即檢測特性；然后創建一個包含檢測結果的 JavaScript 對象，同時在 html 元素加入方便你調整 CSS 的 class 名。
- PostCSS：一個JS插件轉換樣式表的工具。這些插件能夠檢驗你的CSS、支持變量和混合，轉化css3的新特性語法、行內圖片等。
11.瀏覽器兼容的寫法
- IE 條件注釋
<!--[if IE]>用于 IE <![endif]-->
<!--[if IE 6]>用于 IE6 <![endif]-->
<!--[if IE 7]>用于 IE7 <![endif]-->
<!--[if IE 8]>用于 IE8 <![endif]-->
<!--[if IE 9]>用于 IE9 <![endif]-->
<!--[if gt IE 6]> 用于 IE6 以上版本<![endif]-->
<!--[if lte IE 7]> 用于 IE7或更低版本 <![endif]-->
<!--[if gte IE 8]>用于 IE8 或更高版本 <![endif]-->
<!--[if lt IE 9]>用于 IE9 以下版本<![endif]-->
<!--[if !IE]> -->用于非 IE <!-- <![endif]-->
- CSS屬性前綴法
- “_″IE6 生效
"*" IE6 7生效
“\9″ IE6/IE7/IE8/IE9/IE10都生效
“\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack
“\9\0″ 只對IE9/IE10生效，是IE9/10的hack
- “_″IE6 生效
.box {
color: red; /* 所有瀏覽器都生效 */
_color: blue; /* 只有 IE 6 生效 */
*color: pink; /* 只有 IE 6 IE 7 生效 */
color: yellow\9; /* IE 6~8 都生效 */
}
* Trident內核：主要代表為IE瀏覽器,前綴為-ms
Gecko內核：主要代表為Firefox,前綴為-moz
Presto內核：主要代表為Opera,前綴為-o
Webkit內核：產要代表為Chrome和Safari,前綴為-webkit
.box {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}
- 選擇器前綴法
- 針對一些頁面表現不一致或者需要特殊對待的瀏覽器，在CSS選擇器前加上一些只有某些特定瀏覽器才能識別的前綴進行hack（針對瀏覽器之間的表現差異而引入的，利用瀏覽器的bug來進行針對性處理）
例如：
*html *前綴只對IE6生效
*+html *+前綴只對IE7生效
@media screen\9{...}只對IE6/7生效
@media \0screen {body { background: red; }}只對IE8有效
@media \0screen,screen\9{body { background: blue; }}只對IE6/7/8有效
@media screen\0 {body { background: green; }} 只對IE8/9/10有效
@media screen and (min-width:0\0) {body { background: gray; }} 只對IE9/10有效
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只對IE10有效
- 針對一些頁面表現不一致或者需要特殊對待的瀏覽器，在CSS選擇器前加上一些只有某些特定瀏覽器才能識別的前綴進行hack（針對瀏覽器之間的表現差異而引入的，利用瀏覽器的bug來進行針對性處理）
- 條件注釋法和類選擇器相結合
<!--[if IE 7]>
<html class="ie7 no-js">
...
</html>
<![endif]-->
.clearfix {
/* 在非ie 7 瀏覽器中，clearfix展現該屬性 */
}
.ie7 .clearfix {
/* 只有ie7瀏覽器中，clearfix才會展現該屬性 */
}
-
使用Modernizr
- 一個 JavaScript 庫，用于檢測用戶瀏覽器的 HTML5 與 CSS3 特性。Modernizr 會在頁面加載后立即檢測特性；然后創建一個包含檢測結果的 JavaScript 對象，同時在 html 元素加入方便你調整 CSS 的 class 名，這些class名稱標記當前瀏覽器支持哪些特性和不支持哪些特性，支持的特性就直接顯示該天特性的名稱作為一個class（例:canvas,websockets），不支持的特性顯示的class是“no-特性名稱”（可以在css文件中針對不同的class設置不同的屬性值）。（使用介紹）
<head>
<meta charset="utf-8">
<title>My Beautiful Sample Page</title>
<script src="modernizr-1.5.min.js"></script>
</head>
<html class="no-js">
...
頁面加載完后的代碼
<html class=" js no-flexbox canvas canvastext no-webgl no-touch geolocation
postmessage no-websqldatabase no-indexeddb hashchange no-history
draganddrop no-websockets rgba hsla multiplebgs backgroundsize
no-borderimage borderradius boxshadow no-textshadow opacity
no-cssanimations no-csscolumns no-cssgradients no-cssreflections
csstransforms no-csstransforms3d no-csstransitions fontface
generatedcontent video audio localstorage sessionstorage
no-webworkers no-applicationcache svg inlinesvg smil svgclippaths">
- 使用css reset或者Normalize.css，在默認的HTML元素樣式上提供了跨瀏覽器的一致性
