ie8兼容问题汇总

Posted on 2015-03-27 Edited on 2020-12-25 In css

IE8问题汇总及解决方案

1,调整浏览器渲染模式

1	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

2,针对双核浏览器

1	<meta name="renderer" content="webkit">

3,IE8无法识别 Media Query

推荐采用Respond.js

4,H5新标签

html5shiv

5,background-size: cover

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=Enabled, sizingMethod=Size , src=URL)

6,inline-block下padding元素重叠

使用float: left替代display: inline-block实现水平布局

7,placeholder

使用插件比如：https://github.com/mathiasbynens/jquery-placeholder 或者使用JS实现

8,es5的一些属性，方法(主要是针对数组那些)

es5-shim

9，echarts图表在ie8里不显示

(1)ajax由get传值改成post传值。(2)配置图表时去掉最后面的一项数据后面的逗号。

10，d3在ie8不显示问题

try{。。。}catch{ 。。。}容错解决。并进行友好提示。

11，行内样式垂直居中问题，有时line-height和高度相等在ie8无效果

加vertical-align：middle;解决

12，button按钮左右两边的留白的问题

用overflow:visible;padding:0;

13，hack方法解决一些边距等问题

针对仅ie8内input框文字不居中的问题单独写css后缀加\9区分

14，z-index失效

给元素都添加postion:relative

15，table的隔行变色用nth-child(even)不兼容

用JQUERY实现

16，Ajax获取数据的时候用get有的时候由于后台传的汉字转译之后太长，会导致ie取不到后台的数据

改成用post

17，文字有和图片，表单一行的时候，在IE8中布局会乱

文字的行高一定要写的和Input（image、select等等）一样高，外边上下的边距不要用行高撑开，用margin或者padding都行，只用高度撑开的话在ie8中会布局乱。

18，marin不起作用

塌陷问题，常见于浮动布局，解决方案1清除浮动 2，给父及元素加overflow:hidden;

19，IE8 不支持CSS3 选择器，

1. 可引入 selectivizr-min.js 解决。selectivizr-min.js 需要其它js库进行支持，不同js库对其支持程度不同，推荐使用nwmatcher.js。两者结合可满足CSS3 绝大多数选择器。<!- -[if (gte IE 6)&(lte IE 8)]>

1
2
3

 <script type="text/javascript" src="Lib/nwmatcher.js"></script>
          <script type="text/javascript" src="Lib/selectivizr-min.js"></script
<![endif]- ->

20 CSS属性颜色渐变linear-gradient

渐变做法使用hack技术添加一纯色背景。background-color: #f5840c\9;

21，IE 缓存过大，比如一些请求，或者动态更换img地址等

请求后加时间戳

22，ajax在ie8，ie9之下有时候不能跨域

使用 jquery.xdomainrequest.min.js 解决

23，echarts部分图表在ie8之下二次加载的时候不能清空

每次在加载之前清空容纳图表的容器

24,ajax在ie8，ie9之下有时候不能跨域

使用 jquery.xdomainrequest.min.js 解决