IE兼容

浏览器兼容:

原因:不同的浏览器对相同的代码解析不一样,会导致页面的显示不统一.

html:

1.html元素的默认样式不同,造成页面布局的错乱

符合html编程规范,样式重置

2.布局:

margin的兼容问题

同时设置左右方向的margin和float, 在IE6下会产生双边距的问题

解决方式:给对应元素设置display:inline;

 设置较小的高度时,在IE6,7中高度会超出指定的高

解决方式:重新设置元素的line-height属性

display:inline-block; IE6,7不支持, 换行会被解析

img下方的间隙问题:

img设置display:block;vertical-align:to

css:

1.透明度

IE:filter:alpha(opacity=60);

其他浏览器:alpha:0.6;

2.cursor:设置鼠标移入时的手指样式:cursor:pointer;

3.position:fixed;  IE6不支持

解决方式:position:absolute;结合js实现固定定位的布局

css3新增的属性的浏览器支持:

可以通过can i use 来查看各个浏览器对该属性的支持情况

css hack:

优先选用其他方式解决兼容问题,不得已的时候可以采用hack属性前缀法: 条件注释  选择器前缀法

不要过多使用.

使用hack虽然对页面的表现的一致性有好处,但是过多使用会造成文档混乱繁杂,增加后期管理和维护的负担.

javascript:

事件绑定:

通过js代码实现兼容的写法,或者使用目前的主流和完善的一些第三方框架来实现浏览器的兼容.