什麼是浏覽器的相容性
浏覽器相容性問題又被稱為網頁相容性或網站相容性問題，指網頁在各種浏覽器上的顯示效果可能不一緻而産生浏覽器和網頁間的相容問題。是以在網站的設計和制作中，做好浏覽器相容，才能夠讓網站在不同的浏覽器下都正常顯示。
浏覽器的相容性無非還是樣式相容性（css），互動相容性（javascript），浏覽器 hack 三個方面
樣式相容性(css)
normalize.css
1.圖檔間隙
div中的圖檔間隙
bug：在塊元素中插入圖檔時，有時圖檔會将塊元素下方撐大三像素。
Hack：給<img>添加聲明：display:block
2.表單元素行高不一緻(IE,MOZ,C,O,S)
bug：表單元素行高對齊方式不一緻
hack：給表單元素添加聲明：float:left;
3.按鈕元素預設大小及樣式不一緻
hack1： 統一大小及樣式（用a标記模拟）
hack2：如果這個按鈕是一個圖檔，直接把圖檔作為按鈕的背景圖即可。
4.滑鼠指針bug
描述：cursor屬性的hand屬性值隻有IE8浏覽器識别;
hack：如統一某元素滑鼠指針形狀為手型，應添加聲明：cursor:pointer;
5.透明屬性
IE浏覽器寫法：filter:alpha(opacity=數值);取值範圍 1-100(IE8以下)
相容其他浏覽器寫法：opacity:數值;(數值的取值範圍0-1,0.1,0.2,0.3-----0.9)
6.父元素裡有塊元素，如果給子元素添加添加margin-top,父元素會“掉”下來（高度塌陷）
hack1：給父元素添加overflow：hidden；
hack2：給子元素添加float；
hack3：給父元素加邊框；
或者用其他的方法達到我們想要的效果：如給父元素加padding-top
7.雙倍浮向（雙倍邊距）
描述：當Ie6及更低版本浏覽器在解析浮動元素時，會錯誤地把浮向邊的邊界加倍顯示。
hack:給浮動元素添加聲明：display:inline;
8.當li裡的A加display:block或float:left時，出現行高不一緻，有的會多出3像素
hack1：給a加display：inline-block;
hack2：給a加display：inline;
hack3：給li加float，再加寬度
9.萬能清除浮動法
父元素選擇符:after{content:"."; clear:both; display:block; height:0; overflow:hidden; visibility:hidden;}
10.行内塊元素之間空白縫隙的問題
hack1：利用margin 負值，例如Margin-left:-8px;
hack2：把行内塊寫到一行上去
hack3：給父盒子加:font-size:0;
互動相容性
1、event事件
通用方式
document.onclick=function(e){
var e = e || window.event; //相容寫法
}
2、一些“方法”的相容性寫法
停止事件傳播
if(evt.stopPropagation){
return evt.stopPropagation(); //一定不能漏下evt 方法前一定要寫明對象
}else{
return evt.cancelbuble();
}
阻止預設事件
if (e.preventDefault) {
e.preventDefault(); //W3C标準
}else{
e.returnValue = 'false'; //IE
}
擷取第一個子節點（next，last都類似）
if (obj.lastElementChild) {
return obj.firstElementChild; //非IE6/7/8支援
} else{
return obj.firstChild; //IE6/7/8支援
};
設定監聽事件
//參數一：對象
//參數二：事件類型
//參數三：事件處理函數
function addEvent(obj, type, fn){
if (obj.addEventListener) {
obj.addEventListener(type, fn, false); //非IE
} else{
obj.attachEvent('on' + type, fn); //IE
}
}
3、通過className擷取DOM節點
function getClassName(xxx){
var atag = document.all ? document.all : document.getElementsByTagName('*');
var arr = [];
for (var i = 0; i < atag.length; i++) {
var reg = new RegExp('\\b' + xxx + '\\b', 'g');
if (reg.test(atag[i].className)) {
arr.push(atag[i]);
}
}
return arr; //傳回的也是數組，包含傳入的class所有元素；
}
4、event.srcElement問題
IE：event對象有srcElement屬性，沒有target屬性；
Firefox:even對象有target屬性，沒有srcElement屬性。
5、firefox與IE的父元素(parentElement)的差別
IE：obj.parentElement
firefox：obj.parentNode
hack：都使用obj.parentNode
移動端常見案例
1、部分情況下對非可點選元素如(label,span)監聽click事件時，ios下不會觸發
hack：css中增加cursor:pointer
2、底部輸入框被鍵盤遮擋問題
var oheight = $(document).height(); //浏覽器目前的高度
$(window).resize(function(){
if($(document).height() < oheight){
$("#footer").css("position", "static");
}else{
$("#footer").css("position", "absolute");
}
});
3、CSS動畫頁面閃白,動畫卡頓
//使用綜合屬性
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
4、阻止旋轉螢幕時自動調整字型大小
5、預加載、自動播放無效
自動播放的有效性受作業系統、浏覽器（webview）、版本等的影響，蘋果官方規定必須由使用者手動觸發才會載入音頻，是以可以在使用者依次輸入後，讓音頻實作預加載:
document.addEventListener('touchstart', function () {
document.getElementsByTagName('audio')[0].play();
document.getElementsByTagName('audio')[0].pause();
});
6、ios safari時間顯示問題
設定new Date日期格式的時候，在ios中的safari中發現顯示效果與其他浏覽器不一緻。
隻識别：new Date("year/month/day");
7、移動端300ms延遲。
hack1：一般在移動端用tap事件來取代click事件
hack2：fastclick可以解決在手機上點選事件的300ms延遲
8、手機上的flex布局時會有相容性問題
.box{
display: -webkit-box; //老版本文法: Safari, iOS, Android browser, older WebKit browsers.
display: -moz-box; //老版本文法: Firefox (buggy)
display: -ms-flexbox; //混合版本文法: IE 10
display: -webkit-flex; //新版本文法: Chrome 21+
display: flex; //新版本文法: Opera 12.1, Firefox 22+
浏覽器hack
1、Firefox
上面是僅僅被Firefox浏覽器識别的寫法，具體如：
支援Firefox的還有幾種寫法：
/* 支援所有firefox版本 */ #selector[id=selector] { property: value; }
或者： @-moz-document url-prefix() { .selector { property: value; }
/* 支援所有Gecko核心的浏覽器 (包括Firefox) */ *>.selector { property: value; }
2、Webkit枘核浏覽器(chrome and safari)
@media screen and (-webkit-min-device-pixel-ratio:0) { Selector { property: value; } }
/*上面寫法主要是針對Webkit核心的浏覽器，如Google Chrome 和 Safari浏覽器：*/
@media screen and (-webkit-min-device-pixel-ratio:0) { .demo { color: #f36; } }
3、Opera浏覽器
html:first-child>body Selector {property:value;}
/*或者：*/ @media all and (min-width:0) { Selector {property: value;} }
/*或者：*/ @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { head~body Selector { property: value; } }
/*上面則是Opera浏覽器的Hack寫法：*/
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { head~body .demo { background: green; } }
4、IE9浏覽器
:root Selector {property: value9;}
/*上面是IE9的寫法，具體應用如下：*/
:root .demo {color: #ff09;}
5、IE9以及IE9以下版本
Selector {property:value9;}
/*這種寫法隻有IE9以及IE9以下版本能識别，這裡需要注意此處“9”隻能是“9”不能是别的，比如說“8”，不然會失去效果的，如：*/
.demo {background: lime9;}
6、IE7浏覽器
*+html Selector{property:value;} 或 *:first-child+html Selector {property:value;}
/*上面兩種是IE7浏覽器下才能識别，如：*/
*+html .demo {background: green;} 或者： *:first-child+html .demo {background: green;}
7、IE7及IE7以下版本浏覽器
Selector {*property: value;}
/*上面的寫法在IE7以及其以下版本都可以識别，如：*/
.demo {*background: red;}
8、IE6浏覽器
加_下劃線即可
CSS選擇器的Hack寫法
下面我們主要來看CSS選擇器和CSS屬性選擇器在不同浏覽器的支援情況。下面先來看CSS選擇器支援情況。
1、IE6以及IE6以下版本浏覽器
* html .demo {color: green;}
* ```
2、僅僅IE7浏覽器
```css
*:first-child+html .demo {color: green;}
3、除IE6之外的所有浏覽器（IE7-9, Firefox,Safari,Opera）
4、IE8-9,Firefox,Safari,Opear
5、IE9+
6、Firefox浏覽器
7、Webkit核心浏覽器（Safari和Google Chrome）
8、Opera浏覽器
9、iPhone / mobile webkit
CSS屬性Hack寫法
/*1、IE6浏覽器*/
.demo {_color: red;}
/*2、IE6-7浏覽器識别*/
.demo {*color: red;}
/*3、所有浏覽器除IE6浏覽外*/
.demo {color/**/:red;}
/*4、IE6-9浏覽器*/
.demo {color: red9;}
/*5、IE7-8浏覽器*/
.demo {color/***/:red9;}
IE條件注釋，全部采用選擇器Hack的寫法。這種寫法分兩步：
1、建立條件樣式表，并在HTML中body裡添加相應的class類名：
<!–[if IE6]–><<!–[if IE7]–><!–[if IE8]–><!–[if IE9]–><!–[if !IE]–>
2、接着建立對應的樣式
.demo {color: blue;}/*現代浏覽器*/
.non-ie .demo {color: red;}/*除IE外浏覽器*/
.ie9 .demo {color: yellow;}/*IE9浏覽器*/
.ie8 .demo{color: green;}/*IE8浏覽器*/
.ie7 .demo {color: orange;}/*IE7浏覽器*/
.ie6 .demo {color: lime;}/*IE6浏覽器*/
@media all and (min-width: 0px){ .demo {color:black;} /* webkit and opera */
@media screen and (-webkit-min-device-pixel-ratio:0){ .demo{color:#369;}/* webkit */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { head~body .demo{color:#cf6;}/* opera */
@-moz-document url-prefix(){ .demo{color:#963;}/* firefox * /