最近在维护一些老的项目, 需要兼容 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
目前就接触这么多, 后面的有空再补充吧.
来源: http://www.bubuko.com/infodetail-3340877.html