记录一下逼疯我的IE8兼容性调整

IE8不兼容的东西一箩筐：

css3的calc()、rgba()...

IE8能用的东西：

css3的box-sizing、min-**、max-**

 

1、不兼容calc():

改布局吧小伙伴！

 

2、不兼容rgba()和opacity:

使用了：

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4c000000,endColorstr=#4c000000);

其中#后面两位是透明度：

 

3、不兼容box-shadow：

 

使用：

/*Internet Explorer*/
background:#fff;


/*Internet Explorer 8 */


-ms-filter:"progid:DXImageTransform.Microsoft.Shadow(color=#CCCCCC,direction=0,strength=6) 
　　　　　　  progid:DXImageTransform.Microsoft.Shadow(color=#CCCCCC,direction=90,strength=6) 
　　　　　　　progid:DXImageTransform.Microsoft.Shadow(color=#CCCCCC,direction=180,strength=6) 
　　　　　　　progid:DXImageTransform.Microsoft.Shadow(color=#CCCCCC,direction=270,strength=6)";


/*低于Internet Explorer 版本8*/


*filter: progid:DXImageTransform.Microsoft.Shadow(color=#CCCCCC, direction=0, strength=6) 
　　　　　　progid:DXImageTransform.Microsoft.Shadow(color=#CCCCCC, direction=90, strength=6) 
　　　　　　progid:DXImageTransform.Microsoft.Shadow(color=#CCCCCC direction=180, strength=6) 
　　　　　　progid:DXImageTransform.Microsoft.Shadow(color=#CCCCCC, direction=270, strength=6);


/*标准浏览器*/

box-shadow:0px0px6px#CCC;

 

Shadow滤镜必须配合background属性一起使用，否则该滤镜失效


在IE8中，-ms-filter是filter的别名，两者区别是-ms-filter的属相值必须被单引号或双引号包围，而filter中则不是必须，而在IE8之前的版本中，filter的属性值必须不被单引号或双引号包围。


Shadow滤镜的基本语法：


filter:Shadow(Color=color,Direction=direction,strength=strength)
color代表投影的底色，该数值是用英文字母来代替的， 例如投影底色是蓝色的话，就应该设置color=blue。
direction参数是用来设置投影方向的，如果该数值是0的话，就代表垂直投影，此外该数值45度为单位，它的默认值是向左的270度。
strength设置或检索以对象为基准的在运动方向上的向外扩散距离。
box-shadow的基本语法：


box-shadow:<length><length><length>||<color>
box-shadow:X轴位移 Y轴位移 阴影大小 阴影颜色


在低于Firefox4、Chrome10的浏览器中实现阴影效果需要添加：


-moz-box-shadow: 0px 0px 6px #CCC;


-webkit-box-shadow: 0px 0px6px #CCC;

 

 

4、不兼容placeholder

使用js插件：jquery.placeholder.js

https://github.com/mathiasbynens/jquery-placeholder

 

5、不兼容html5标签和css3的一些属性

使用js插件如下——

（1）html5shiv.js、html5media.js

（2）respond.js

（3）modernizr（一款兼容css3、html5等元素的插件）

 

6、本地视频不能播放：

在此路径：C:\Windows\SysWOW64\Macromed\Flash\flashPlayerTrust

之下添加   trustpath.txt   文件，内容如下：

 

c:\

d:\

e:\

（有几个盘就写几个即可）

 

7、不兼容text-overflow

首先平时用的时候要配合使用
复制代码代码如下:
overflow: hidden; 
white-space: nowrap; 

这两个属性让起溢出隐藏和不换行,然后IE8用的时候记得不要加 

复制代码代码如下:
word-berak:break-all; 
word-wrap:break-word; 

这样断开了,在IE8里面是不会变成省略号的(但是在IE6/7/FF/Chrome都没有问题),其实都单行省略了,本来也没有必要断词
所以一般标准组合就是: 

复制代码代码如下:
overflow: hidden; 
white-space: nowrap; 
-o-text-overflow: ellipsis; /* for Opera */ 
text-overflow: ellipsis; /* for IE */ 

基本通杀所有浏览器了
 

最后像<a>这类默认非块的元素,要加上display:block;才有效果，还有别忘了width或者max-width。

 

8、不兼容background-size

filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )

enabled：可选项。布尔值(Boolean)。设置或检索滤镜是否激活。 true：默认值。滤镜激活。 false：滤镜被禁止。

sizingMethod：可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。 crop：剪切图片以适应对象尺寸。 image：默认值。增大或减小对象的尺寸边界以适应图片的尺寸。 scale：缩放图片以适应对象的尺寸边界。

src：必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数，滤镜将不会作用。

 

9、不兼容line-height

     line-height:32px;
     line-height: 32px\9; /*IE8*/
    *line-height: 32px; /* IE7支持 */
    _line-height: 32px; /* IE6支持 */
    -ms-line-height: 32px;/*IE9+支持*/
    -webkit-line-height:32px; /*chrome safair*/

    -moz-line-height: 32px;/*火狐*/

 

10、不兼容transform

使用filter的Matrix（矩阵）

 

11、不兼容border-radius

只能使用图片代替了（整体背景图或者四个弧角的背景图）

 

12、echarts

使用echarts第二版能兼容ie8，而第三版会提示更新浏览器。

 

13、视频播放器

使用的是jplayer插件

 

14、使用react作为开发框架时：

https://blog.csdn.net/zjw0742/article/details/52981706

https://github.com/GarveyZuo/React-router-redux-IE8/

（虽然本人很习惯用vue，怎奈何，vue不能兼容ie8。。。）

 

----------------------------------------------续更分割线-------------------------------------------------