background-size IE8兼容方案

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

2017.7.5更新：

在处理IE8兼容性问题上，对于背景图片比背景框还大的情况，还需要做一下处理：

 /*针对IE8的hack，目的是除掉之前background*/

                 background:none\9;

根据canius（http://caniuse.com/#search=background-size），background-size兼容性为IE9以及以上浏览器，如下图所示。

实例代码：

 <!doctype html>

 <html lang="en">

     <head>

         <meta charset="UTF-8" />

         <title>background-size 兼容性处理</title>

         <style type="text/css">

             * {

                 margin: 0;

                 padding: 0;

             }

             .parent {

                 width: 400px;

                 height: 400px;

                 margin: 100px;

                 border: 1px solid red;

                 background: url(img/aaa.jpg) no-repeat center center;

                 background-size: 100% 100%;

             }

         </style>

     </head>

     <body>

         <div class="parent">

         </div>

     </body>

 </html>

效果：

（1）chrome浏览器：

（2）IE8浏览器：

兼容性方案：

使用filter属性：

.parent {

                width: 400px;

                height: 400px;

                margin: 100px;

                border: 1px solid red;

                background: url(img/aaa.jpg) no-repeat center center;

                background-size: 100% 100%;

                /*针对IE8的hack，目的是除掉之前background*/

                background: none\9;

                /*下一行为关键设置*/

                filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/aaa.jpg', sizingMethod='scale');

            }

IE8浏览器效果：