核心提示：浏览器兼容:原因:不同的浏览器对相同的代码解析不一样,会导致页面的显示不统一.html:1.html元素的默认样式不同,造成页面布局的错乱符合html编程规范,样式重置2.布局:margin的兼容问题...
浏览器兼容:
原因:不同的浏览器对相同的代码解析不一样,会导致页面的显示不统一.
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代码实现兼容的写法,或者使用目前的主流和完善的一些第三方框架来实现浏览器的兼容.
