最近在维护一些老的项目,需要兼容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

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

前端ie7的兼容问题及解决方案(未完待续)的更多相关文章

  1. 前端工程师IE6兼容性问题随笔(未完待续)

    1 height.在IE6下元素高度小于19px的时候,会被当做19px来处理.解决办法:用overflow:hidden;来处理.box{height:2px;background:red;over ...

  2. javascript有用小功能总结(未完待续)

    1)javascript让页面标题滚动效果 代码如下: <title>您好,欢迎访问我的博客</title> <script type="text/javasc ...

  3. MVC丶 (未完待续······)

         希望你看了此小随 可以实现自己的MVC框架     也祝所有的程序员身体健康一切安好                                                     ...

  4. Go web编程学习笔记——未完待续

    1. 1).GOPATH设置 先设置自己的GOPATH,可以在本机中运行$PATH进行查看: userdeMacBook-Pro:~ user$ $GOPATH -bash: /Users/user/ ...

  5. 初进MFC的世界,太奇妙。第六次作业----未完待续

    又一次的迁徙.我希望能够早些抵达. 第六次作业-未完待续!图形界面,计算器文件 本次的作业是给自己的计算器加一个可视化的窗口,我开始也是很激动和憧憬的,看了很多的界面库,发现并没有想象的那么简单,因为 ...

  6. Avro和Thrift区别(未完待续)

    两者都是优秀的序列化框架: Avro创造之初是Hadoop之父Doug为了创造一种更加快捷的序列化方案(此时已经有了thrift),用于Hadoop的HDFS的文件序列化问题. Thrift一个成熟的 ...

  7. ASP.NET MVC 系列随笔汇总[未完待续……]

    ASP.NET MVC 系列随笔汇总[未完待续……] 为了方便大家浏览所以整理一下,有的系列篇幅中不是很全面以后会慢慢的补全的. 学前篇之: ASP.NET MVC学前篇之扩展方法.链式编程 ASP. ...

  8. 关于DOM的一些总结(未完待续......)

    DOM 实例1:购物车实例(数量,小计和总计的变化) 这里主要是如何获取页面元素的节点: document.getElementById("...") cocument.query ...

  9. 我的SQL总结---未完待续

    我的SQL总结---未完待续 版权声明:本文为博主原创文章,未经博主允许不得转载. 总结: 主要的SQL 语句: 数据操作(select, insert, delete, update) 访问控制(g ...

随机推荐

  1. xpath爬虫实战-爬取小说斗罗大陆第四部

    爬取思路 用到的第三方库文件 lxml,requests,fake_agent 用fake_agent里的UserAgent修饰爬虫 用requests进行基本的请求 用lxml进行html的分析 用 ...

  2. 鸟哥Linux私房菜(基础篇)——第五章:首次登入与在线求助 man page笔记

    1.X Winsows与文本模式的切换 ●[Ctrl] + [Alt] + [F1] ~ [F6] :文字接口登入 tty1 ~ tty6 终端机.        ●[Ctrl] + [Alt] + ...

  3. 怎么在java中关闭一个thread

    怎么在java中关闭一个thread 我们经常需要在java中用到thread,我们知道thread有一个start()方法可以开启一个线程.那么怎么关闭这个线程呢? 有人会说可以用Thread.st ...

  4. vue2.x学习笔记(二十八)

    接着前面的内容:https://www.cnblogs.com/yanggb/p/12682573.html. 生产环境部署 以下大多数内容在你使用vue cli的时候都是默认开启的,仅跟你自定义的构 ...

  5. Vue 2.x折腾记 - (17) 基于Ant Design Vue 封装一个配置式的表单组件

    前言 写了个类似上篇搜索的封装,但是要考虑的东西更多. 具体业务比展示的代码要复杂,篇幅太长就不引入了. 效果图 2019-04-25 添加了下拉多选的渲染,并搜索默认过滤文本而非值 简化了渲染的子组 ...

  6. 再砸4.35亿美元,LG疯狂扩建太阳能电池生产线

    LG在收缩高分辨率电视和其他消费电子产品业务的同时,在太阳能面板业务上却很明显一直在进行扩张.LG公司表示,他们将斥资4.35亿美元在韩国工厂增加超过6条生产线,使其太阳能电池生产量能够在2018年达 ...

  7. IIS6服务器的请求流程(图文&源码)

    1.IIS 7开发与管理完全参考手册  http://book.51cto.com/art/200908/146040.htm 2.Web服务IIS 6   https://technet.micro ...

  8. .user.ini 无法修改/删除 怎么办?

    首先 了解chattr命令: Linux chattr命令用于改变文件属性. 这项指令可改变存放在ext2文件系统上的文件或目录属性,这些属性共有以下8种模式: a:让文件或目录仅供附加用途.b:不更 ...

  9. The Preliminary Contest for ICPC Asia Xuzhou 2019 徐州网络赛 K题 center

    You are given a point set with nn points on the 2D-plane, your task is to find the smallest number o ...

  10. 算法——Java实现栈

    栈 定义: 栈是一种先进后出的数据结构,我们把允许插入和删除的一端称为栈顶,另一端称为栈底,不含任何元素的栈称为空栈 栈的java代码实现: 基于数组: import org.junit.jupite ...