1.html的兼容性
对于不支持html5的标签的可以使用html5shiv.js来处理，
IE内核是 Trident;FF 是 Gecko;opera 是 presto;safari and chrome 是 webkit
2.css的兼容性
条件注释
<!--[if IE 6]>这里的内容只有IE6.0才能看见<![endif]-->
<!--[if gt IE 7]>大于IE7<![endif]>
css hack
_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)
css选择符级 hack
比如*html #demo{color:red;} 这是只有IE6才识别
html #demo{color:red\9}只有IE9识别
对于特定浏览器支持的样式我们有时要加-ms- -webkit- -moz- -o-进行兼容处理
注意的是IE10开始才支持animation
IE的透明效果
可以设置属性filter:alpha(opacity=0-100)
IE9开始支持透明度opacity
ff透明加 -moz-opacity:0.10;
3.常见问题
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 比内联元素的优先级高
3.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
