https://www.cnblogs.com/qq313462961/p/6527184.html
一樣米養百樣人，儘管吃同樣的食物，但還是有人健康，有人身體不適。這個個人估計和瀏覽器兼容問題一樣，同樣的HTML(HTML5)+CSS(CSS3)+JS，但是表現出的外部特徵還是不能達到統一，存在瑕疵。同樣的代碼，有的瀏覽器效果顯示“正常”，有的顯示“不正常”。
什麼是兼容問題，那麼：
- 不正常的原因是什麼？（不支持標籤屬性or存在bug）
- 該如何讓其顯示正常？
爲什麼瀏覽器會存在兼容問題？
- 同一瀏覽器，版本越老，存在bug越多，相對於版本越新的瀏覽器，對新屬性和標籤、新特性支持越少。
- 不同瀏覽器，核心技術不同，標準不同，實現方式也有差異，最終呈現出來在大衆面前的效果也是會有差異。
處理兼容問題的思路：
1、要不要做？
- 產品的角度（產品的受衆、受衆的瀏覽器比例、效果優先還是基本功能優先）。
- 成本的角度 (有無必要做某件事)。
2、做到什麼程度？
- 讓哪些瀏覽器支持哪些效果。
3、如何做？
- 根據兼容需求選擇技術框架/庫(如jquery 1.x.x)。
- 根據兼容需求選擇兼容工具：html5shiv、Respond.js、CSS Reset、normalize.css、Modernizr.js、 postcss。
- 條件註釋、CSS Hack、js 能力檢測做一些修補。
漸進增強和優雅降級
- 漸進增強(progressive enhancement): 針對低版本瀏覽器進行構建頁面，保證最基本的功能，然後再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗
- 優雅降級`(graceful degradation): 一開始就構建完整的功能，然後再針對低版本瀏覽器進行兼容。
具體方法：
IE條件註釋 (conditional comment) 是於HTML源碼中被IE有條件解釋的語句。條件註釋可被用來向IE提供及隱藏代碼，注意：只有 IE9以下的瀏覽器才能識別這種語法，其他瀏覽器僅僅認爲是普通註釋。
<!--[if IE 6]> <p>IE6下 這句生效，在其他瀏覽器下認爲是普通註釋</p> <![endif]--> <!--[if !IE]><!--> <script>alert("在 IE 下條件語法生效，但script不執行。在非 IE 下上下兩句都被當做註釋所以當前 script 會執行");</script> <!--<![endif]--> <!--[if IE 8]> <link href="ie8only.css" rel="stylesheet"> <![endif]-->
使用了條件註釋的頁面在ie9 及以前 中可正常工作，但在ie10 以後不再支持。
CSS hack是利用瀏覽器遺留 bug 的原理來識別舊的瀏覽器。
.box{ color: red; _color: blue; /*只有ie6認識*/ *color: pink; /*只有ie67認識*/ color: yellow\9; /*ie瀏覽器都能識別*/ }
以下是一些常見屬性的兼容情況
- inline-block: >=ie8
- min-width/min-height: >=ie7
- :before,:after: >=ie8
- div:hover: >=ie7
- inline-block: >=ie8
- background-size: >=ie9
- 圓角: >= ie9
- 陰影: >= ie9
- 動畫/漸變: >= ie10
一些兼容寫法範例：
.clearfix:after{ content: ''; display: block; clear: both; } .clearfix{ *zoom: 1; /* 僅對ie67有效，zoom:1觸發hasLayout,起到類似BFC的效果 */ }
.target{ display: inline-block; *display: inline; /*僅對ie67生效*/ *zoom: 1; /*僅對ie67生效*/ }
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!DOCTYPE html> <!--[if lt IE 7 ]> <html class="no-js ie6"> <![endif]--> <!--[if IE 7 ]> <html class="no-js ie7"> <![endif]--> <!--[if IE 8 ]> <html class="no-js ie8"> <![endif]--> <!--[if (gte IE 9)|!(IE)]><!--><html class="no-js"><!--<![endif]-->
一些和兼容相關的工具/庫：
特別是Modernizr.js 和 postcss 很有實踐價值，值得好好看看用法。
用到的網站：
- 瀏覽器市場份額 - 百度統計流量研究院
- caniuse.com 查CSS屬性兼容
- Browserhacks 查 Hack 的寫法
上次寫的是瀏覽器兼容性的CSS篇，也還沒有寫全，不過現在還是先把JS篇也補上再說。
瀏覽器兼容問題一：獲取非行間樣式currentStyle/getComputerStyle。
問題：currentStyle,只兼容IE，在其他瀏覽器是不能用的。
解決方案：同時使用getComputedStyle，可以兼容Chrome、FF。
瀏覽器兼容問題二：不同瀏覽器的標籤默認的外補丁和內補丁不同
問題：下面是IE7以下不能兼容：
for (var i = 0; i < aImg.length; i++) { aImg[i].src = 'img/' + str[i] + '.png'; }
解決方案：換爲下面方法：
for (var i = 0; i < aImg.length; i++) { aImg[i].src = 'img/' + str.charAt(i) + '.png'; }
瀏覽器兼容問題一：不同瀏覽器對DOM的支持程度
IE9對DOM支持兼容好很多，但是還是很多坑。FF對DOM支持在99%以上，就是每次啓動太慢。Chrome對DOM支持比FF差，但是比IE好太多。
問題：在IE6-8中，對childNodes支持還是挺好的，相反其他瀏覽器會把文本節點和元素節點混淆，可用nodeType來鑑別。
HTML:
<ul id="ul1"> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>
JS:
var oul = document.getElementById('ul1'); alert(oul.childNodes.length);
此時的彈出框就會顯示‘11’，比我們想要的‘5’，多出‘6’。
另外上面使用childNodes會出現問題，可用children來代替，只會出現我們想要的元素節點，不會出現兼容問題，所以上面因childNodes可以改爲children：
var oul = document.getElementById('ul1'); alert(oul.children.length);
此時彈出框顯示的數字爲‘5’，就是我們想要的結果。
children會只顯示子節點。
問題：firstChild只能在IE6-8兼容，在高版本瀏覽器中只能用firstElementChild。
HTML:
<ul id="ul1"> <li>1</li> <li>2</li> <li>3</li> </ul>
JS:
var oUl=document.getElementById('ul1'); //IE6-8 oUl.firstChild.style.background='red';
此時只在IE6-8中li背景纔會變色，在高級瀏覽器中沒有變化，當換爲firstElementChild時：
var oUl=document.getElementById('ul1'); //高級瀏覽器 oUl.firstElementChild.style.background='red';
此時在高級瀏覽器中li背景會變爲紅色。
解決方法：
var oUl=document.getElementById('ul1'); if(oUl.firstElementChild){ oUl.firstElementChild.style.background='red'; }else{ oUl.firstChild.style.background='red'; }
此時無論IE或者chrome、FF都可以得到想要的結果。
PS：相同的兼容問題還存在lastChild、nextSibling、previousSibling中，解決方法也相同。
-
瀏覽器兼容問題一：不同瀏覽器的標籤默認的外補丁和內補丁不同
問題：在
瀏覽器兼容問題一：不同瀏覽器的標籤默認的外補丁和內補丁不同
瀏覽器兼容問題一：不同瀏覽器的標籤默認的外補丁和內補丁不同
瀏覽器兼容問題一：不同瀏覽器的標籤默認的外補丁和內補丁不同
瀏覽器兼容問題一：不同瀏覽器的標籤默認的外補丁和內補丁不同
瀏覽器兼容問題一：不同瀏覽器的標籤默認的外補丁和內補丁不同
瀏覽器兼容問題一：不同瀏覽器的標籤默認的外補丁和內補丁不同