前端ie7的兼容问题及解决方案（未完待续）

Posted 2021-03-22 liuxin-673855200

最近在维护一些老的项目，需要兼容ie7 ，css3就不能用了，这里总结一下碰到的问题及解决方案。

1、盒模型

　　ie7、8  的盒模型都是 box-sizing为content-box的盒模型，这里在做的时候就要注意

2、display：inline-block

    碰到使用块级元素的场景   有兼容写法   *display：inline；*zoom：1。

　　不愿这么写的话就用float吧，不过要记得请浮动

3、水平垂直居中

　　在c3中我们可以用 flex ，可以用transform，实现水平垂直居中。在ie7下 怎么办呢？

　　如果是已知宽高的元素，我们可用 定位：left：50%，margin-left：-100px；这种方法居中

　　未知宽高的话，先转成 inline ，用text-align：center；和line-height 去实现水平和居中定位。

4、透明度

　　ie7不支持opacity 和 rgba()  这种方式设置透明度，碰到一些场景，比如模态框 的透明背景，如何兼容呢？

　　这里在写代码的时候  除了用 opacity:0.2  再加 filter:alpha(opacity:20);就可以了 （亲测有效）

5、圆角和阴影

　　border-radius 和box-shadow 是不支持的，只能用背景图片代替了.......

6、dataset

　　ie7下不支持 event.target.data(‘‘)这种方法获取dataset

　　我们可以用  event.target.getAttribute(‘data-index‘) 获取data属性值

7、border-spacing

　　这个貌似是表格边框的属性，ie8支持，可以设置表格的间距。

　　ie7下 加兼容写法 *border-spacing:expression(this.cellSpacing="14px")

　　cell-spacing 都可以用这种写法  详见这篇博客https://blog.csdn.net/gdfjhc/article/details/87298303

　目前就接触这么多，后面的有空再补充吧。