浏览器兼容

关于IE的兼容

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

说明：IE=edge表示强制使用IE最新内核，chrome=1表示如果安装了针对IE6/7/8等版本的浏览器插件Google Chrome Frame（可以让用户的浏览器外观依然是IE的菜单和界面，但用户在浏览网页时，实际上使用的是Chrome浏览器内核），那么就用Chrome内核来渲染。

浏览器IE7
浏览器IE8

1.圆角border-radius

2.Opacity元素

解决办法：Visibility该属性类似opacity属性，该属性值为hidden的时候，元素将会隐藏。

#dialogBg {
    background-color:#000;
    filter: alpha(opacity=60);
    background: rgba(0,0,0,0.6);
}

3.元素：last-child,nth-child(n)

解决办法：case-c内包含5个col-md-case

.case-c .col-md-case {
    float: left;
    width: 18%;
    padding: 0;
    margin: 0 1.25%;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.04);
}
.case-c .col-md-case:first-child {
    margin-left: 0;
}
.case-c .col-md-case+.col-md-case+.col-md-case+.col-md-case+.col-md-case{ 
//一个是第一个、两个是第二个
    margin-right: 0;
}

4.@miedia

5.Media Query

说明：Bootstrap3的官方文档中已经针对浏览器兼容性做了比较详细的说明，推荐采用Respond.js解决此问题，具体方法参见它的文档即可。

有一个地方需要注意的是，如果对Bootstrap3 media query声明的属性（比如.Container）进行覆盖，那在不支持media query的浏览器中Respond.js起作用后，会把你的覆盖样式再次覆盖。我的解决方案是在后面加上!important。

6.SVG格式的图片

<svg width="18" height="18">
          <image xlink:href="images/svg/search.svg" src="images/png/search.png" width="18" height="18" />
</svg>

7.background-size

解决办法：

background: url(../images/yue-bg.png) left top no-repeat;
background-size:cover;
/*针对IE8的hack，目的是除掉之前background*/
background: none\9;
/*下一行为关键设置*/
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/yue-bg.png', sizingMethod='scale');

8.rgba()

9.

浏览器IE9