谈谈浏览器的兼容性
(一)html部分
ul标签外边距问题:ul标签在IE6/IE7中有个默认的外边距,但在IE8以及其他浏览器中有个默认的内边距;
解决方法:统一设置ul的内外边距为0
(二)CSS样式的兼容性
1、在IE6下块级元素设置浮动后,在设置水平margin的情况下,显示的margin比设置的大的问题。
解决方法:添加display:inline-block,将其转为行内元素
2、图片默认间距,几个图片排列时都会有默认间距
因为img属于行内属性标签,所以只要不超出容器宽度,img标签都会排在同一行里,但是部分浏览器标签之间会有间距。
解决方法:(1)为img添加 float:left设置为浮动布局。
(2)为父元素设置font-size:0即将空白字符大小设为0;
3、IE6下使用margin:0 auto;无法使其居中;
解决方法:为其父容器设置text-align:center;
1.text-align:center 设置文本或img标签等一些内联对象(或与之类似的元素)的居中。
2.margin:0 auto 设置块元素(或与之类似的元素)的居中。
4、在使用绝对定位或者相对定位后,IE中设置z-index失效,原因是因为其元素依赖于父元素的z-index,但是父元素默认为0, 子高父低,所以不会改变显示的顺序
5、IE6下无法设置1px的行高,原因是由其默认行高引起的;
解决办法:为其设置overflow:hidden;或者line-height:1px;
6、IE5-IE8不支持透明度opacity属性
解决办法:可以另外添加IE滤镜alpha
opacity: 0.8; filter: alpha(opacity = 80); /*for IE5~7*/ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity = 80)"; /*for IE8*/
(三)JavaScript的兼容性
1.标准的事件绑定方法函数为addEventListener,但IE下是attachEvent;
2、ajax的实现方式不同,这个我所理解的是获取XMLHttpRequest的不同,IE下是activeXObject