神州之心项目总结

ie8的css兼容性问题

1.不支持box-shadow属性。

解决方法：

使用-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#C7C9CD')";

说明：strength是阴影大小，direction是阴影方位，单位为度，可以为负数，color是阴影颜色 （不支持rgba格式）使用IE滤镜实现盒子阴影的盒子必须是行元素或以行元素显示（block或inline-block;）

box-shadow: 0 5px 10px rgba(33,36,41,0.2);/* for opera or ie9 */  
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#C7C9CD')";

2.不支持rgba()格式的颜色

如果设置的背景色有一个透明度，则ie8及以下都不支持
解决办法：使用filter滤镜设置渐变。设置startColorstr和stopColorstr为相同的颜色，相同的透明度，即可达到半透明的背景效果。其中颜色字符串中，第1,2个字符表示透明度，例如当前的7f表示0.5的透明度，其他值自行去查；后面6个字符既是颜色的十六进制格式。

background-color: rgba(29,61,103,.5); 
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f1D3D67,endColorstr=#7f1D3D67);

3.不支持opacity属性

解决方法： 使用filter滤镜。注意：在使用filter滤镜设置不透明度时，需要给该元素设置背景色，否则设置的不透明度将没有任作用。这个属性一旦设置成功，那么该属性里的元素或者文字都会有设置的透明度。

background: #fff; 
opacity: 0; 
filter: alpha(opacity=0);/*兼容ie8及以下*/

4.常用的css3选择器的支持性

1）支持:first-child，不支持:last-child选择器，尽量避免使用last-child选择器 。
2）支持:after和:before选择器
3)  不支持:nth-child选择器
4）不支持:not()选择器
5）不支持:checked，:disabled
6）支持属性选择器，如[attribute^=value]，[attribute$=value]，[attribute*=value]等

5.不支持border-radius属性

解决方法，可通过pie.js补丁文件解决
下载pie补丁文件，放入项目中

image

然后在页面中引用