IE浏览器兼容问题

入门前端一年多，入门的第一家公司，做的是针对小资用户的美食电商，主做自己的APP产品，我主要负责一些H5活动页面以及web站的页面维护及开发。所以对于pc端浏览器兼容问题遇到的不是很多，现在主做PC端产品，遇到一些浏览器兼容问题，下面就来说说这几天遇到的几个问题。

1.IE不兼容透明度opacity

　　首先说明一点，IE9以上版本支持opacity属性（包括IE9）,亲测过；

　　实现兼容：

.active{
    opacity:0.5;//chrome firfox
    filter:alpha(opacity=50);//ie9及以上     
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);/*ie6-8*/ 
}

2.IE不兼容圆角border-radius（ie9及以上可支持，ie8及以下不能支持）

　　这个问题我暂时没找到什么简单的解决办法，一下链接可供参考

　　　　http://blog.csdn.net/lxcao/article/details/53192287

3.IE不兼容background-size　　

　　IE9以下不支持此属性，首先说下background-size这个属性的用法

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style>
 7             
 8             .item{
 9                 width:150px;
10                 height:100px;
11                 border:1px solid red;
12                 background: url(img/banner-1.jpg) no-repeat;
13                 background-size:cover;            
　　　　　　　　　　　filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/banner-1.jpg',  sizingMethod='scale');// 兼容 IE
14             }
15         </style>
16     </head>
17     <body>
18         <div class="active0"></div>
19         <div class="active1"></div>    
20         
21         <div class="item">
22             
23         </div>
24     </body>
25 </html>

background-size:cover时

IE8显示如图（同IE9）

chrome显示如图(火狐同下)

background-size:contain/100%时

IE显示效果如图

chrome / firefox显示效果如图

background-size:100% 100%;

IE / chrome /firefox 显示效果如图

所以，除了background-size:100% 100%;的情况，其他情况下各浏览器的显示效果还是不尽相同的