ie7,8兼容大全，不定期更新中...

啦啦啦，都是我工作中遇到的问题，所以把解决方法整理一下，都是网上搜的，嘻嘻嘻。

1.轮播：swiper2支持ie7,8的轮播插件，你的不二选择！
    ps：当有左右控制按钮，一页展示多个slider时，向左滑动会出现上一个滑块空白的情况
    ps：滚动slider要大于等于4个，我试了3个不生效
    解决方法，添加centeredSlides和loopAdditionalSlides两个属性
    loopAdditionalSlides的值不能大于slider的总个数
    示例代码：

centeredSlides: true,
loopAdditionalSlides: 1,
slidesPerView: 3,
loop: true,
watchActiveIndex: true

2.background-size属性：
    注意：滤镜和background-image路径要是绝对路径，而且要相同。
    代码示例：

background: url(../images/banner1bg.png);
-moz-background-size: cover;<!-- 火狐浏览器 -->
background-size: cover;<!-- 其他浏览器 -->
background-image: url("http://localhost/work/front/images/banner1bg.png");<!-- ie浏览器 -->
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://localhost/work/front/images/banner1bg.png", sizingMethod='scale');<!-- ie浏览器 -->

3.rgba颜色：
    参考：透明度与值的参照
    0.1===19；0.2===33；0.3===4C；0.4===66；0.5===7F；
    0.6===99；0.7===B2；0.8===C8；0.9===E5；
    前两位为透明度，后四位为色值；
    代码示例：

background: rgba(255,255,255,0.1);<!-- 一般的高级浏览器都支持 -->
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#19ffffff,endColorstr=#19ffffff);<!-- ie浏览器 -->

4.box-sizing(在ie7不支持)：
    解决方法：减少相应得宽度或者高度。
    代码示例：

padding: 0 12px;
min-width: 160px;
*ming-width: 136px;

5.float属性(在ie7显示异常)
    情景再现：在ie7下50%的两个float:left,不在一行显示，分两行显示了。
    历史原因：IE 3px bug。
    解决方法1：给后一个元素加上margin-left:-3px即可。
    解决方法2：使用相对定位和绝对定位。

6.box-shadow属性(在ie7，8不支持)：
    参数解释：
    阴影方向0-360顺时针对应不同角度的投影，不能做四周都有的投影哦
    IE滤镜
    filter:progid:DXImageTransform.Microsoft.Shadow(color='#969696'/*颜色数值*/,Direction=135/*阴影角度*/,strength=5/*阴影半径*/);
    代码示例：

filter:progid:DXImageTransform.Microsoft.Shadow(color='#969696',Direction=135,strength=5);

7.opacity属性：
    解决方法： IE滤镜    
    参数解释：
    0-100的数值对应0到1的透明度
    代码示例：

filter: Alpha(opacity=100);

haha1.图片垂直居中：
    ps：这个不是兼容问题，这是解决方法
    解决方法1：加i标签
    代码示例：
    

<div class="imglr">
	<img src="images/glory.png" alt=""><i></i>
</div>
.imglr{
	width: 400px;height: 400px;
}
.imglr i{
	display: inline-block;height: 100%;vertical-align: middle;
}
.imglr img{
	max-width: 400px;max-height:400px;
}