最近在维护一些老的项目,需要兼容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. 必应每日图片api

    https://cn.bing.com/HPImageArchive.aspx?format=xml&cc=jp&idx=0&n=1 format   = 'xml' | 'j ...

  2. Openstack Swift 如何查找 slave node 挂载的 VD 的 IP

    1. 在 /etc/swift/container-server.conf 或者 object-server.conf 中的 devices= 一行 可以找到 /srv/node. 在 /srv/no ...

  3. Spring5参考指南:SpringAOP简介

    文章目录 AOP的概念 Spring AOP简介 Spring AOP通知类型 写过程序的都知道OOP即面向对象编程. 从最开始的面向过程编程,到后面的面向对象编程,程序的编写方式发生了重大的变化,面 ...

  4. 使用Spring Boot搭建你的第一个应用程序

    文章目录 依赖配置 main程序配置 MVC配置 安全配置 存储 Web 页面和Controller 异常处理 测试 结论 Spring Boot是Spring平台的约定式的应用框架,使用Spring ...

  5. numpy库的学习笔记

    一.ndarray 1.numpy 库处理的最基础数据类型是由同种元素构成的多维数组(ndarray),简称“数组”. 2.ndarray是一个多维数组的对象,ndarray数组一般要求所有元素类型相 ...

  6. 学习web前端的roadmap

  7. 【Linux常见命令】xargs命令

    xargs - build and execute command lines from standard input. 从标准输入< 方向获取数据,再创建和执行命令 xargs 是给命令传递参 ...

  8. 也许你对 Fetch 了解得不是那么多(下)

    上文链接:也许你对 Fetch 了解得不是那么多(上) 编者按:除创宇前端与作者博客外,本文还在语雀发布. 编者还要按:作者也在掘金哦,欢迎关注:@GoDotDotDot Fetch 与 XHR 比较 ...

  9. SaaS 公司如何切入大客户

    编者按:本文作者是氪空间第四期项目 Kuick 创始人崔超,其现在的产品KuickDeal是一款销售活动管理工具.本文来自作者投稿,36 氪经授权转载. 首先,今天我们不讨论 SaaS 公司应该做中小 ...

  10. IEEE 754标准--维基百科

    IEEE二进制浮点数算术标准(IEEE 754) 是20世纪80年代以来最广泛使用的浮点数运算标准,为许多CPU与浮点运算器所采用.这个标准定义了表示浮点数的格式(包括负零-0)与反常值(denorm ...