谈谈浏览器的兼容性

(一)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

原文地址:https://www.cnblogs.com/xiaoan0705/p/8612561.html