公司页面要求兼容到 IE8，发现 IE8 不兼容的东西好多好多。
1、不兼容 calc()
尽量避免使用，如果要兼容 ie8 还是暂时放弃这个
2、不兼容 rgba()和 opacity
使用滤镜 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4c000000,endColorstr=#4c000000);
这里需要注意，这个颜色“#4c000000”是由两部分组成的。
第一部是#号后面的 4c。是 rgba 透明度 0.3 的 IEfilter 值。从 0.1 到 0.9 每个数字对应一个 IEfilter 值。对应关系如下：（计算方法：透明度值*255 再转换成 16 进制，取整计算，没有进位直接舍去。）
| RGBA 透明值 | IEfilter 值 |
|---|---|
| 0.1 | 19 |
| 0.2 | 33 |
| 0.3 | 4C |
| 0.4 | 66 |
| 0.5 | 7F |
| 0.5 | 99 |
| 0.7 | B2 |
| 0.8 | C8 |
| 0.9 | E5 |
第二部分是 4c 后面的六位。这个是六进制的颜色值。要跟 rgb 函数中的取值相同。比如 rgb(255,255,255)对应#ffffff；就是白色。
3、不兼容 box-shadow
使用滤镜解决，这里需要注意 Shadow 滤镜必须配合 background 属性一起使用，否则该滤镜失效
/*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);
用法说明：
1.在 IE8 中，-ms-filter 是 filter 的别名，两者区别是-ms-filter 的属相值必须被单引号或双引号包围，而 filter 中则不是必须，而在 IE8 之前的版本中，filter 的属性值必须不被单引号或双引号包围。
2.filter:Shadow(Color=color,Direction=direction,strength=strength)
color 代表投影的底色，该数值是用英文字母来代替的， 例如投影底色是蓝色的话，就应该设置 color=blue。
direction 参数是用来设置投影方向的，如果该数值是 0 的话，就代表垂直投影，此外该数值 45 度为单位，它的默认值是向左的 270 度。
strength 设置或检索以对象为基准的在运动方向上的向外扩散距离。
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 等元素的插件）
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
6、不兼容 text-overflow
overflow: hidden;
white-space: nowrap;
-o-text-overflow: ellipsis; /* for Opera */
text-overflow: ellipsis; /* for IE */
7、不兼容 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 地址指定背景图像。假如忽略此参数，滤镜将不会作用。
*/
8、不兼容 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; /*火狐*/
9、不兼容 transform
使用 filter 的 Matrix（矩阵）
http://www.useragentman.com/IETransformsTranslator/
10、不兼容 border-radius
只能使用图片代替了（整体背景图或者四个弧角的背景图）
11、echarts
使用 echarts 第二版能兼容 ie8，而第三版会提示更新浏览器。
12、视频播放器
使用的是 jplayer 插件
网友评论