您的位置：首页 > 其它

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

2017-08-15 15:14 375 查看

在工作中碰到一个问题：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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航