部分IE8使用的兼容CSS3属性的方法

IE6-8支持html5语义化标签如

<header></header>
<footer></footer>

引入html5.js，如CDN方式

<!--[if lt IE 9]>

<script src="//cdn.bootcss.com/html5shiv/r29/html5.min.js"></script>
<![endif]-->

 

属性	chrome	IE6-8
border-radius	border-radius: 50%;	border-radius: 50%;//不支持 border-bottom-left-radius: 10%; behavior: url(ie-css3.htc);
box-shadow	box-shadow: 10px 10px 10px orange;	box-shadow: 10px 10px 10px orange;//只显示黑色 behavior: url(ie-css3.htc);
text-shadow	text-shadow: 10px 10px 2px blue;	text-shadow: 10px 10px 2px blue; behavior: url(ie-css3.htc);//IE9--2种都不支持
opacity	opacity: 0.2;	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=20);
background-size	background:url('XXX/XXX.jpg'); background-size:cover;	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='XXX/XXX.jpg', sizingMethod='scale')
rgba	background: rgba(255,0,255,.1);	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#19ff00ff,endColorstr=#19ff00ff);

关于rgba,#19ff00ff，第一部分是#号后面的19。是rgba透明度0.1的IEfilter值。从0.1到0.9每个数字对应一个IEfilter值。对应关系如下：

IE9同时支持filter和rgba，导致效果重叠，需要：

<!--[if lt IE 9]>

.~~

<![endif]-->