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

												

兼容性问题:backgroud-size支持IE8浏览器的方法的更多相关文章

  1. 让bind函数支持IE8浏览器的方法

    bind函数在IE8下是不支持的,只需要在你的js文件中加入如下代码就可以支持IE8 //让bind函数支持IE8 if (!Function.prototype.bind) { Function.p ...

  2. Bootstrap3适配IE8浏览器的方法

    <!--[if lte IE 8]> <script src="js/respond.min.js"></script> <script ...

  3. 让IE6/IE7/IE8浏览器支持CSS3属性

    让IE6/IE7/IE8浏览器支持CSS3属性 一.下载 您可以狠狠地点击这里:ie-css3.htc,这个玩意儿是让IE浏览器支持CSS3表现的关键东东. 二.上面的是什么东西 首先说说.htc文件 ...

  4. 浅谈如何让 Bootstrap 3兼容IE8浏览器

    Bootstrap 是最受欢迎的 HTML.CSS 和 JS 框架,用于开发响应式布局.移动设备优先的 WEB 项目.-- Bootstrap 官网 Bootstrap 来自 Twitter,是目前最 ...

  5. Jquery3.x高版本支持IE8

    最近在做项目的时候,遇到一个安全漏洞的问题 检测到目标站点存在javascript框架库漏洞 解决办法是 将受影响的javascript框架库升级到最新版本. 好吧,就给你升吧,升完之后,我的天啊,尽 ...

  6. #include <objsafe.h>//OCX控件在IE8浏览器下不能使用问题

    一.OCX控件开发常见的问题 1.OCX控件在IE8浏览器下不能使用问题 原因:IE8会拦截OCX控件的方法. 解决方法:在OCX控件开发时加入安全接口. (1)在有"Crtl"字 ...

  7. 【转】让Bootstrap 3兼容IE8浏览器

    FROM : http://www.ijophy.com/2014/05/bootstrap3-compatible-with-ie8.html 最近在研究Bootstrap(官方,Github)这个 ...

  8. 让Bootstrap 3兼容IE8浏览器

    最近在研究Bootstrap(官方,Github)这个优秀的前端框架,Bootstrap最开始是Twitter团队内部的一个前端框架,所谓前端框架就是一个CSS/HTML框架,框架里面有下拉菜单.按钮 ...

  9. bootstrap3 兼容IE8浏览器

    近期在使用bootstrap这个优秀的前端框架,这个框架非常强大,框架里面有下拉菜单.按钮组.按钮下拉菜单.导航.导航条.面包屑.分页.排版.缩略图.警告对话框.进度条.媒体对象等,bootstrap ...

随机推荐

  1. JSON库的使用研究(二)

    Java 中哪个 JSON 库的解析速度是最快的? 这个问题有意义吗?各个JSON库的性能差距不大?呵呵,差距大不大,自己往下看吧! 这个问题我们应该分为以下四个维度进行研究: 1.序列化 2.反序列 ...

  2. [原创]K8Cscan插件之Web主机扫描(存活主机、机器名、Banner、标题)

    [原创]K8 Cscan 大型内网渗透自定义扫描器 https://www.cnblogs.com/k8gege/p/10519321.html Cscan简介:何为自定义扫描器?其实也是插件化,但C ...

  3. FIleZilla连接linux(Ubuntu)服务器的相关问题

    想通过FileZilla传个tomcat到服务器,然后遇到了下面的两个问题,问题已经通过百度解决了,这里总结下: 1,虚拟机通过桥接模式连网,ip地址为:192.168.119.147 在FieZil ...

  4. 一套能体现 RBAC 的表结构设计

    1.RBAC 概述 2.表结构设计 2.1.用户表 2.2.角色表 2.3.权限表 2.4.用户角色(关系)表 2.5.角色权限(关系)表 3.总结 1.RBAC 概述 RBAC(Role-Based ...

  5. Web Service 部分内容简述(1)

    1.什么是Web服务(web service) Wb服务是一种可以用来解决跨网络应用集成问题的开发模式,是基于网络的.分布式的模块化组件,它执行特定的任务遵守具体的技术规范,这些规范使得Web Ser ...

  6. linux 命令 — lsof

    lsof 列出打开的文件 输出 FD: 文件描述符,cwd表示应用程序当前工作目录,txt表示打开的是程序代码(二进制文件或者共享库),0标准输入,1标准输出,2错误流 TYPE:DIR目录,CHR字 ...

  7. 【详解JavaScript系列】JavaScript之流程语句

    一 开篇概述 本讲主要讲解JavaScript流程语句,其大致内容包括如下: 其中,常用的if,while,do..while,for在本片文章就不论述,重点论述for..in..,label,bre ...

  8. Jenkins入门之导航操作

    通过前面章节讲解我们已经创建了构建任务,我们已经进入了三层目录,如何回到上一级界面?如何直接回到主界面?如何知道我当前所在的位置? 我们看一下红框框选的部分,为Jenkins导航树,从这个导航树,很多 ...

  9. Spark内存管理机制

    Spark内存管理机制 Spark 作为一个基于内存的分布式计算引擎,其内存管理模块在整个系统中扮演着非常重要的角色.理解 Spark 内存管理的基本原理,有助于更好地开发 Spark 应用程序和进行 ...

  10. tomcat开启自启动

    linux方式 #!/bin/bash #chkconfig: #description: Starts and Stops the Tomcat daemon. #by benjamin ##### ...