入门前端一年多，入门的第一家公司，做的是针对小资用户的美食电商，主做自己的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%;的情况，其他情况下各浏览器的显示效果还是不尽相同的