首先需要指出的是,在现在即将面向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;