css(七)：css兼容

一、浏览器的整体兼容

<!--[if lt IE 9]>    //判断当前浏览器的版本是否小于IE 9
   <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
   <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<!--[endif]-->
其中:
 1.Respond.js 是一个快速、轻量的 polyfill，用于为 IE6-8 以及其它不支持 CSS3 Media Queries 的浏览器提供媒体查询的 min-width 和 max-width 特性，实现响应式网页设计（Responsive Web Design）。
 2.html5shiv 使不支持html5的浏览器支持html5新增的标签,  IE 9支持html5,但是其一下的版本不支持.
 3.放在页面的顶部位置

注意：html5shiv.js和respond.js引入不起作用解决
仔细检查发现在中括号前多了个空格，把空格去掉，效果变正常。还有在中括号之后加空格会引起异常，中括号里面ie和9之间一定要加空格不然也会异常。看似漫不经心的一个小空格也会引起大错误,用条件注释时一定要严格地按照格式来写

二、min-height

兼容火狐ie的最小高度
{ height:auto!important; height:200px; min-height:200px; }

三、rgba()

/* IE8 */
background-color:black;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
/* IE8 */

background-color:rgba(0,0,0,0.4);

四、ie兼容background-size()

/* ie8 */
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='file:///F:/test/images/flashbg.jpg',sizingMethod='scale');

background-size(contain);

五、火狐浏览器下点击a标签时出现虚线

a:focus {
   outline: none;
}

六、chrome低版本中input输入出现黄色背景解决办法

input:-webkit-autofill { 
  -webkit-box-shadow: 0 0 0px 1000px white inset; 
  border: 1px solid #CCC!important; 
}