兼容性问题：backgroud-size支持IE8浏览器的方法

在工作中碰到一个问题：background-size是css3的新属性，当在IE8及其以下浏览器中不起作用，导致背景图片不能自适应元素的大小？

先看一个小demo:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .img{
            width:300px;
            height: 300px;
            border:1px solid #000;
            background: url(img/timg.jpg) no-repeat;
            background-size: cover; //IE8下此属性失效
        }
    </style>

</head>
<body>
<div class="img"></div>
</body>
</html>

上面的代码在IE8以上，谷歌火狐等浏览器下，图片自适应铺满div元素，在IE8下只显示图片的一部分，解决办法如下：

解决办法1：引入jquery.backgroundcover.js 文件（下载地址：https://www.npmjs.com/package/jquery-backgroundcover），代码如下

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .container{
            width:300px;
            height: 300px;
            border:1px solid #000;
            background: url(img/timg.jpg) no-repeat;
            background-size: cover;
        }
    </style>
    <script src="js/jquery-1.8.2.min.js" ></script>
    <script src="js/jquery.backgroundcover.min.js"></script>
</head>
<body>
<div class="container"></div>
<script>
    $('.container').backgroundcover({
        safearea: "50%,50%,50%,50%"
    })
</script>
</body>
</html>

解决办法2：backgroundsize.min.htc（一个国外人写的小插件,下载地址：http://www.dowebok.com/139.html）代码如下

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .container{
            width:300px;
            height: 300px;
            border:1px solid #000;
            background: url(img/timg.jpg) no-repeat;
            background-size: cover;
            -ms-behavior: url(css/backgroundsize.min.htc);//url中是文件的地址
            behavior: url(css/backgroundsize.min.htc);
        }
    </style>
</head>
<body>
<div class="container"></div>
</body>
</html>

解决办法3：变相的绕过background-size属性，用绝对定位修改代码，也可以达到那种效果

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .container{
            width:300px;
            height: 300px;
            border:1px solid #000;
            position: relative;
        }
        .container img{
            position: absolute;
            top:0;
            left:0;
            width: 100%;
            height: 100%;
        }
    </style>

</head>
<body>
<div class="container">
    <img src="img/timg.jpg" alt=""/>
</div>
</body>
</html>

 

 

 



 









            

            
posted @ 
2017-08-15 15:14 
Ai-Long 
阅读(853) 
评论(0) 
编辑 
收藏 
举报