浏览器的兼容写法

Ⅰ.css部分

一、清除浏览器的默认样式
不同浏览器都会带有自己的浏览器默认样式，一般我们写一个单独的样式表来设置初始样式，在每一次新建一个页面时引用这个样式表即可(common.css)

二、css浏览器兼容前缀写法
为了让CSS3样式兼容，需要将某些样式加上浏览器前缀：
-ms- IE浏览器
-moz- 火狐浏览器
-webkit- chrome和safari浏览器
-o- 欧鹏浏览器

三、常见的浏览器兼容性问题和解决方法
1.盒模型
在各种浏览器中，盒模型有两种结构，一种是w3c标准的内容
盒模型，一种是怪异盒(边框盒模型)模型，在低版本的IE浏
览器下用的是怪异盒模型，为元素设置的宽度是盒子内容的宽度
解决：
{
box-sizing:border-box;
}

将盒模型的值设置成border-box统一效果,在页面布局计算时也会方便很多
2.不同浏览器的标签默认的margin和padding不同
解决：在css里增加通配符
*{
margin:0;
padding:0;
}
3. IE6双边距
在IE6中设置了float，同时又设置了相应方向的margin，就会出现双边距问题
同一行如果有多个浮动元素，第一个浮动元素会出现这个双边距bug
是float布局最常见的浏览器兼容问题
解决：设置display：inline；
4.图片之间的默认间距
几个img标签放在一起的时候，有些浏览器会有默认的间距，通配符清除间距也不起作用
解决：利用浮动为图片清除边距
5.display:inline-block在IE7以下不支持
解决：对低版本IE特殊处理：.div{
display:inline-block;
*display:inline;
*zoom:1;
}
6.IE8及以下不支持rgba透明度
7.IE10以下的版本不支持flex布局
PS：css Hack:针对不同浏览器写不同的css代码的过程
…

Ⅱ.js部分
汇总:几种兼容写法
一、DOM
1.标签的自定义属性
在IE8及以下浏览器可以.和[]的方法取到，但是标准的浏览器不支持
getAttribuate()支持所有的浏览器
2.父元素的第一个子节点
元素.firstChild(包含文本类型的节点)
兼容写法:
元素.firstElementChild || 元素.firstChild
最好的解决方法是写成 "父元素.children[0].style=…"的形式，避免了写法兼容性的问题
3.距离当前元素最近的一个定位父元素节点:若无定位父级默认找到body
元素.offsetParent
在IE7以下的浏览器中，该元素在没有定位时找到的是body，有定位时找到的是html
4.元素到其定位父级的距离(偏移值)
元素.offsetLeft/元素.offsetTop
若有定位的父级，但自己没有定位，IE7以下浏览器里该属性指的是到body的距离
若无定位父级，IE8及以下浏览器指的是到html的距离
使用要点
1.清除浏览器的默认样式
2.该元素要有定位属性，否则就有兼容性问题

二、BOM
1.window对象的close方法
(很少用来关闭一个正常页面，该方法用来关闭用open方法打开的窗口)
火狐禁止代码关闭浏览器
chrome直接关闭
IE是询问关闭
三、事件
1.事件对象
window.event无法在firefox上运行,W3C不支持window.event
兼容写法:
var ev = ev || event
2.阻止事件冒泡
标准写法:
event.stopPropagation();
兼容写法：
event.stopPropagation() ? event.stopPropagation() : event.cancleBubble = true;
3.阻止浏览器的默认行为
标准写法：
event.preventDefault();
兼容写法:
event.preventDefault ? event.preventDefault() : return false ;
4.事件监听器
低版本的IE浏览器中，每个元素和window对象都有两个方法attactEvent和detachEvent方法
obj.attachEvent(事件名称，事件函数)//事件监听
obj.detachEvent(事件名称，事件函数)//解除事件监听
在支持W3C标准事件监听器的浏览器中，对每个支持事件的对象都有addEventListener方法和removeEventListener方法，该方法既支持冒泡，又支持捕获
obj.addEventListener(事件名称，事件函数，是否捕获)//事件监听
obj.detachEventListener(事件名称，事件函数，是否捕获)//解除事件监听
PS：不同浏览器处理事件监听的特点
1.IE的obj.attachEvent的特点
1.没有捕获
2.事件名称有on
3.事件倒序执行
4.this指向window
2.标准浏览器的obj.addEventListener的特点
1.有捕获
2.事件名称没有on
3.事件顺序执行
4.this指向该事件的对象
5.事件委托
低版本IE浏览器写法:
event.srcElement
兼容写法:
var tar = event.target || event.srcElement
6.鼠标滚轮事件、判断滚轮方向