IE8兼容性收藏

IE8兼容性汇总以及解决方案

IE浏览器hack

html:

<!--[if IE]>
这段文字只在IE浏览器显示
<![endif]-->

只在IE6下生效
<!--[if IE 6]>
这段文字只在IE6浏览器显示
<![endif]-->

只在IE6以上版本生效
<!--[if gte IE 6]>
这段文字只在IE6以上(包括)版本IE浏览器显示
<![endif]-->

只在IE8上不生效
<!--[if ! IE 8]>
这段文字在非IE8浏览器显示
<![endif]-->

非IE浏览器生效
<!--[if !IE]>
这段文字只在非IE浏览器显示
<![endif]-->

css:

“-″减号是IE6专有的hack
“\9″ IE6/IE7/IE8/IE9/IE10都生效
“\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack
“\9\0″ 只对IE9/IE10生效，是IE9/10的hack
.hack{
/*demo1 注意顺序，否则IE6/7下可能无法正确显示，导致结果显示为白色背景*/
    background-color:red; /* All browsers */
    background-color:blue !important;/* All browsers but IE6 */
    *background-color:black; /* IE6, IE7 */
    +background-color:yellow;/* IE6, IE7*/
    background-color:gray\9; /* IE6, IE7, IE8, IE9, IE10 */
    background-color:purple\0; /* IE8, IE9, IE10 */
    background-color:orange\9\0;/*IE9, IE10*/
    _background-color:green; /* Only works in IE6 */
    *+background-color:pink; /*  WARNING: Only works in IE7 ? Is it right? */
}

1、IE8及以下，布局问题

不使用flex，box-size:border-box，calc

2、IE下进行跨域请求解决方案

引入jquery.xdomainrequest.min.js

3、ie8,9 进行跨域post请求，参数无法传递解决办法

jquery的ajax方法添加 crossDomain: true == !(document.all) 例如：

$.ajax({
    url: url,
    type: 'POST',
    data: params,
    dataType: 'json',
    contentType: "application/json",
    crossDomain: true == !(document.all),
    success: function (res) {
      ...
    },
    error: function (err) {
      ...
    }
})

4、IE6,IE7下overflow：hidden无效

解决办法：position:relative; 或者 position:relative; / for IE6,IE7 */即可解决该bug。
既：

position: relative;
overflow: hidden;

5、css3选择器兼容问题？

<!- -[if (gte IE 6)&(lte IE 8)]>
<script type="text/javascript" src="./js/common/nwmatcher.js"></script>
<script type="text/javascript" src="./js/common/selectivizr-min.js"></script>
<![endif]- ->

在非必不可得到情况下不建议使用，会引起页面卡顿

6、兼容IE8不直接使用sessionStorage,localStorage

使用公用方法，使用办法如下：

function setKeyItem(key,value) {
    if (window.sessionStorage){
      sessionStorage.setItem(key,value);
    }else{
      setCookie(key,value,TimeoutCookie)
    }
}

7、“JSON”未定义

引入json2.js
下载地址：https://github.com/douglascrockford/JSON-js

8、IE跨域下出现{“readyState”:0,”status”:0,”TypeError”…}

对浏览器进行设置 工具->Internet选项->安全->自定义级别->其他->通过域访问数据源->启用

9、透明度兼容性：

a、使用rgba背景色做透明的：
背景色变成：background: #000 \9;
再加IE9及以下的透明度设置方法

opacity=80
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);

b、直接使用opacity设置透明度的
添加IE9及以下的透明度设置方法

-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);

10、输入框垂直居中问题

将line-height设置成和height一样 即可,如：

innput.txt{
  height: 36px;
  line-height: 36px;
}

11、布局错位问题:

a、没有清除浮动的清除浮动即可,如：
html:

<div class="parent clear">
  <div class="child">child1</div>
  <div class="child">child2</div>
</div>

css:

.clear{
  overflow: hidden;
  *zoom:1;
}
.parent .child{
  float: left;
}

12、css伪类问题：

将用伪类实现的效果换成其他实现方式；
主要是针对IE7内核，如果不用兼容IE7内核，则不用处理此类问题。

13、ul元素中li 两端顶头，间距均等问题

li使用float为left，加上margin-left, 然后ul同时也加上margin-left，其值使用与li相对应的负值,如：
html:

<ul class="parent">
  <li class="child">测试</li>
  <li class="child">测试</li>
  <li class="child">测试</li>
  <li class="child">测试</li>
</ul>

css:

.parent{
  width 1200px;
  margin-left: -20px;
  *zoom:1;
}
.parent .child{
  width 280px;
  height:400px;
  margin-left: 20px;
}

14、background-size: cover

如果你想使用background-size: cover设置全屏背景，
很遗憾IE8办不到…但可以使用IE独有的AlphaImageLoader滤镜来实现，添加一条如下的CSS样式：

.box{
   background-size: cover;
   filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale , src='image.img')\9;
}

将sizingMethod设置为scale，src设置成背景图片地址就OK了。
还没完，如果你在此背景之上放置了链接，那这个链接是无法点击的。
一般情况下的解决办法是为链接或按钮添加position:relative使其相对浮动。

15、last-child

first-child是CSS2的内容，但是last-child就不是了，所以IE8不买账。
推荐的做法不是使用last-child，而是给最后一个元素设置一个.last的class，然后对此进行样式设置，这样就全部兼容了。

16、Media Query(媒体查询)

IE8似乎无法识别Media Query，所以需要hack一下啦！推荐采用Respond.js解决此问题。
Respond.js让IE6-8支持CSS3 Media Query。
Bootstrap里面就引入了这个js文件，从名字看出来是自适应的兼容。
使用：考虑到IE9是支持CSS3的，所以直接在HTML页面的head标签中添加脚本引用即可：

<!--[if lt IE 9]>
  <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]—>

官方demo地址：http://scottjehl.github.com/Respond/test/test.html
a.在css中正常用 min/max-width media
b.引入respond.min.js，但要在css的后面
（越早引入越好，在ie下面看到页面闪屏的概率就越低，因为最初css会先渲染出来，如果respond.js加载得很后面，这时重新根据media query解析出来的css会再改变一次页面的布局等，所以看起来有闪屏的现象）

17、关于max-width

a. td中的max-width
如果针对td中的img元素设置max-width: 100%，在IE和Firefox你会发现不奏效，而在Chrome中却是可以的。
经查询发现需要给table设置table-layout: fixed.
b. 嵌套标签中的max-width
如下的HTML结构：

<div class="work-item">
  <a href="#" class="work-link">
    <img src="sample.jpg" class="work-image img-responsive">
  </a>
</div>

最外层元素.work-item设置了固定宽度，但是对img设置max-width为100%却无效.
后来才发现需要再对a标签设置width: 100%，这样才能使最内层的img标签充满整个div。

18、嵌套inline-block下padding元素重叠

html:

<ul>
   <li><a>1</a></li>
   <li><a>2</a></li>
   <li><a>3</a></li>
</ul>

CSS：

ul li{
   display: inline-block;
}
ul li a{
   display: inline-block;
   padding: 10px 15px;
}

按理来说a标签之间的距离应该是30px，但在IE8中出现了重叠，只有15px。
我的解决方法是使用float: left替代display: inline-block实现水平布局。

19、filter blur

CSS3中提供支持滤镜效果的属性filter，比如支持高斯模糊效果：

filter: blur(10px);
-webkit-filter: blur(10px);
-moz-filter: blur(10px);

IE8对filter: blur(10px)的显示效果是对HTML元素进行小范围的模糊处理，这个效果并不是高斯模糊
要想支持高斯模糊，需要如下设置：

filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='10');

在实践中发现一个坑就是，所有position: relative的元素都不会生效。
其他的发现是，IE9对filter: blur(10px)无效，
而对filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=’10’),是针对元素小范围的模糊效果。

20、调整浏览器渲染模式

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

21、针对双核浏览器

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

22、IE8无法识别 Media Query

推荐采用Respond.js

23、placeholder

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

24、echarts图表在ie8里不显示

a、ajax由get传值改成post传值
b、配置图表时去掉最后面的一项数据后面的逗号

25、d3在ie8不显示问题

try{
	//...
}catch{
	 //...
}

容错解决,并进行友好提示

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

加vertical-align：middle;解决

27、button按钮左右两边的留白的问题

用overflow:visible;padding:0;

28、z-index失效

给元素都添加postion:relative

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

改成用post

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

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

未完待续…