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

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

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

原文地址:https://www.cnblogs.com/liuxin-673855200/p/12072001.html

时间: 2024-10-08 10:42:17

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

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

1 height.在IE6下元素高度小于19px的时候,会被当做19px来处理.解决办法:用overflow:hidden;来处理.box{height:2px;background:red;overflow:hidden;} 2 1px dotted(1px的点线)在IE6下不支持解决办法:且背景图片平铺 3 margin.兼容性问题的爆发点.无法触发haslayout,无法解决margin的传递,在IE6下父级有边框的时候(也 就是设置了border的三元素的时候),子元素的margin值会

听风讲MVC丶 —— 一言不合就撸码 (未完待续······)

     希望你看了此小随 可以实现自己的MVC框架     也祝所有的程序员身体健康一切安好                                                                                                                                                ——久伴深海丶默 1.什么是前端控制器(font controller).Java Web中的前端控制器是应用的门面,

jdbc14 及 jdbc16 共存所带来的问题【未完待续】

在JAVA中JDK版本与JDBC版本的一致性十分重要,开发都们常常会忽略了这一点导致很多不必要的错误.昨天给客户排查了一个关于EDB在JBoss中使用时关于这方面的问题,希望给大家一点启发. 系统环境: Red Hat Enterpirse Linux 6 JBoss Enterprise Application Server 6 EnterpriseDB Postgres Plus Advanced Server 9 Oracle JDK 1.6 问题症状: 在JBoss日志中间歇性地出现以下

whatweb.rb 未完待续

#!/usr/bin/env ruby #表示ruby的执行环境 =begin # ruby中用=begin来表示注释的开始 .$$$ $. .$$$ $. $$$$ $$. .$$$ $$$ .$$$$$$. .$$$$$$$$$$. $$$$ $$. .$$$$$$$. .$$$$$$. $ $$ $$$ $ $$ $$$ $ $$$$$$. $$$$$ $$$$$$ $ $$ $$$ $ $$ $$ $ $$$$$$. $ `$ $$$ $ `$ $$$ $ `$ $$$ $$' $ `$

把握linux内核设计思想系列(未完待续......)

[版权声明:尊重原创,转载请保留出处:blog.csdn.net/shallnet,文章仅供学习交流,请勿用于商业用途] 把握linux内核设计思想(一):系统调用 把握linux内核设计思想(二):硬中断及中断处理 把握linux内核设计思想(三):下半部机制之软中断 把握linux内核设计思想(四):下半部机制之tasklet 把握linux内核设计思想(五):下半部机制之工作队列及几种机制的选择 把握linux内核设计思想(六):内核时钟中断 把握linux内核设计思想(七):内核定时器和

[译]App Framework 2.1 (1)之 Quickstart (未完待续)

最近有移动App项目,选择了 Hybrid 的框架Cordova  和  App Framework 框架开发. 本来应该从配置循序渐进开始写的,但由于上班时间太忙,这段时间抽不出空来,只能根据心情和兴趣,想到哪写到哪,前面的部分以后慢慢补上. App Framework 前生是是叫 jqMobi 注意大家不要和 jQuery Mobile 混淆了,它们是两个不同的框架,一开始我还真混淆了0.01秒. 这里我先翻译一下Quickstart 部分,一是自己工作上用的上,二是也想顺便练练英文,最关键

数据结构与算法之--高级排序:shell排序和快速排序【未完待续】

高级排序比简单排序要快的多,简单排序的时间复杂度是O(N^2),希尔(shell)排序的是O(N*(logN)^2),而快速排序是O(N*logN). 说明:下面以int数组的从小到大排序为例. 希尔(shell)排序 希尔排序是基于插入排序的,首先回顾一下插入排序,假设插入是从左向右执行的,待插入元素的左边是有序的,且假如待插入元素比左边的都小,就需要挪动左边的所有元素,如下图所示: ==> 图1和图2:插入右边的temp柱需要outer标记位左边的五个柱子都向右挪动 如图3所示,相比插入排序

git个人使用总结 —— idea命令行、撤销commit (未完待续)

近期在使用git,最开始在idea界面操作,后来要求用命令行.刚开始还不是很习惯,感觉很麻烦,用了几天后感觉爽极了! 其实git的命令也不是很多,熟悉一段时间就差不多能顺利使用了.使用过程中遇到了各种各样的问题,有些小问题就在这里集中总结一下. 1.idea命令行.git安装后就自带终端git bash,使用起来很方便.但是用idea开发,开发后还要在相应文件夹下打开git bash很麻烦.其实idea也带有终端terminal,在最下方可以找到,在这里就可以执行命令.但是如果是默认方式安装的g

Unity3D快捷键 未完待续

Unity3D 点选Object+F Object在当前视角居中 CTRL+1/2 Scene/Game视图的切换 MonoDevelop CTRL+K  删除光标所在行的该行后面的代码 CTRL + ALT +C  注释/不注释该行 CTRL+ DOWN  像鼠标滚轮一样向下拖 CTRL + UP 像鼠标滚轮一样向上拖 CTRL + F  查找该脚本 CTRL + SHIFT + F 查找全部脚本 CTRL + H 替换代码 CTRL + SHIFT +W 关掉所有脚本 Unity3D快捷键