常见浏览器兼容性

Posted 2020-08-17

首先需要指出的是，在现在即将面向2017的时间里，还在考虑ie兼容性问题的公司主要分两种，

1.互联网巨无霸企业，bat级别

2.政府相关部门和其他所有业务涉及传统行业的low逼公司（以及这些low逼公司养活的乱七八糟的外包公司）

 

本文只涉及css方面兼容性，个人建议遇到ie相关的原生js兼容性问题直接使用jquery，死磕ie的js相关问题没有任何前途。

 

一：hello

  1.hack标识：

  ie6：_  和星号

  ie7：*

 

  2.ie6/7 不支持部分

  -- 不支持所有的css3属性，比如border-radius，透明边框

  -- 不支持display：table，inline-block等属性；

  -- 滤镜要这样写：filter：alpha(opacity=56);

  -- 不支持 固定定位，要用js

  -- IE6仅支持a标签的伪类，IE7支持所以元素的伪类，但是不支持表单的focus；

二：兼容性问题列表

 

1.块级元素浮动之后，横向的margin会变得更大 ie6，会导致一行中的内容被挤到下一行

解决：浮动之后加上宽高，在设定浮动的块级元素加上属性  display：inline

2.ie6/ie7 块级元素高度小于19px的时候，会比设置的值要大

解决：写font-size=1px，line-height小于设置的高度，overflow：hidden来解决

3.ie双边距：display：inline

4.ie子级盒模型超过父级时候，父级会被撑大

解决：父级标签overflow：hidden

解决2：父级相对定位，子级决定定位

5.ie6img于块元素中，底边多出空白 

解决：父级设置overflow: hidden; 或 img { display: block; } 或 _margin: -5px;