列下常見的瀏覽器的相容處理

一、html的相容性

對於有的瀏覽器不支援HTML5的一些標籤我們可以使用html5shiv.js來進行處理，html5shiv
核心是 IE Trident;FF 是 Gecko;opera 是 presto;safari and chrome 是 webkit

二、css的相容性

條件註釋

<!--[if IE 6]>這裡的內容只有IE6.0才能看見<![endif]-->
<!--[if gt IE 7]>大於IE7<![endif]>

csshack

color:red;所有的瀏覽器都是可以識別的
_color:red;只有IE6可以識別
*color
 
:red;+color:red;*+color:red;[color:red;IE6 7 識別
color:red\9 表示測試後發現IE678910都能識別
color:red\0 891011都能識別
color:!important表示最高的優先順序，然後IE6不支援
所以一般的順序是
\9(678910)*(減少範圍到67)_(只有6)
>2. css選擇符級hack
比如*html #demo{color:red;} 這是隻有IE6才識別
：root #demo{color:red\9}只有IE9識別

對於特定瀏覽器支援的樣式我們有時要加-ms- -webkit- -moz- -o-進行相容處理
注意的是IE10開始才支援animation
IE的透明效果
可以設定屬性filter:alpha(opacity=0-100)
IE9開始支援透明度opacity
ff透明加 -moz-opacity:0.10;

常見的問題
IE的浮動margin變成雙倍問題 解決新增display:inline;
新增clearfix 清除浮動

.clearfix{
    *zoom:1;
}
.clearfix:before,.clearfix:after{
    display:table;
    line-height:0;
    content:"";
}
.clearfix:after{
    clear:both;
}

不同瀏覽器的對齊處理 使用margin:auto

使用reset.css相容

html, body, div, span, applet, object, iframe
 
,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
html {
  font-family: sans-serif; /* 1 */
  line-height: 1.15; /* 2 */
  -ms-text-size-adjust: 100%; /* 3 */
  -webkit-text-size-adjust: 100%; /* 3 */
}
body {
    line-height: 1.618em;
}
audio,
canvas,
progress,
video {
  display: inline-block;
}
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
a {
  background-color: transparent; /* 1 */
  -webkit-text-decoration-skip: objects; /* 2 */
}
a:active,
a:hover {
  outline-width: 0;
}
ol, ul {
    list-style: none;
}
img {
  border-style: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
button,
input { /* 1 */
  overflow: visible;
  outline: none;
  padding: 0;  /*完全清除input的樣式*/
  border-style: none;
  border:1px solid #ccc;
}

外部的容器不需要定義高度，自適應
height:auto表示根據元素中的內容來確定高度，height:100%是繼承父級元素的高度
!important 在IE6中不支援 在ff chrome 從IE7開始支援
!important 比內聯元素的優先順序高
\9（678910）不支援11

三、javascript的相容性

用addEventListener封裝函式，IE的事件處理方式有點不同，為了相容我們可以封裝一個事件處理的物件，記得要在封裝後呼叫

var eventUtil={
            //新增控制代碼
            addHandler:function(element,type,handler){
                if(element.addEventListener){
                    element.addEventListener(type,handler,false);
                }else if(element.attachEvent){
                    element.attachEvent("on"+type,handler);
                }else{
                    element["on"+type]=handler;
                }
            },
            //移除控制代碼
            removeHandler:function(element,type,handler){
                if(element.removeEventListener){
                    element.removeEventListener(type,handler,false);
                }else if(element.detachEvent){
                    element.detachEvent("on"+type,handler);
                }else{
                    element["on"+type]=null;
                }
            },
            //獲得事件
            getEvent:function(event){
                return event?event:window.event;
            },
            //獲得事件的型別
            getType:function(event){
                return event.type;
            },
            //獲得事件來自哪個元素
            getElement:function(){
                return event.target||event.srcElement;
            },
            //阻止預設的行為
            preventDefault:function(event){
                if(event.preventDefault){
                    event.preventDefault();
                }else{
                    event.returnValue=false;
                }
            },
            //阻止事件的冒泡行為
            stopPropagation:function(){
                if(event.stopPropagation){
                    event.stopPropagation();
                }else{
                    event.cancelBubble();
                }
            }
        }

小於8的IE瀏覽器不支援event
要使用window.event 傳遞的引數是event
所以一般我們會寫e = e||window.event;
我們獲取scrollTop的時候
如果是指定物件的scrollTop的話 監聽事件加在父元素上 以及獲取值全都是在父元素的基礎上

FF IE11中只支援document.documentElement.scrollTop
IE5 和chrome中支援document.body.scrollTop
使用document.documentElement.scrollTop||document.body.scrollTop相容性
var scrolltop = document.documentElement.scrollTop ||document.body.scrollTop;
var clientWid = document.documentElement.clientWidth；
var offsetWid = document.documentElement.offsetWidth

小於8的IE瀏覽器 不支援window.onclick 儘量都用document.onclick
實時監測input中輸入的值
使用onchange要經過1.值變化2.onblur失去焦點事件，但是要引入jquery
而使用bind(“input”,function(){})能夠實時監測
(“#text”).bind(“input propertychange”,function(){(“#show”).html($(“#text”).val())
})
input是常規的 propertychange是相容IE的
使用js的話 就oninput onpropertychange

js中給定數值時要加單位px