常见的各个浏览器的兼容处理

列下常见的浏览器的兼容处理

一、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