在工作中碰到一个问题：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. 
						
  2. Bootstrap3适配IE8浏览器的方法
		
    <!--[if lte IE 8]> <script src="js/respond.min.js"></script> <script  ...
    
		
    3. 
						
  3. 让IE6/IE7/IE8浏览器支持CSS3属性
		
    让IE6/IE7/IE8浏览器支持CSS3属性 一.下载 您可以狠狠地点击这里:ie-css3.htc,这个玩意儿是让IE浏览器支持CSS3表现的关键东东. 二.上面的是什么东西 首先说说.htc文件 ...
    
		
    4. 
						
  4. 浅谈如何让 Bootstrap 3兼容IE8浏览器
		
    Bootstrap 是最受欢迎的 HTML.CSS 和 JS 框架,用于开发响应式布局.移动设备优先的 WEB 项目.-- Bootstrap 官网 Bootstrap 来自 Twitter,是目前最 ...
    
		
    5. 
						
  5. Jquery3.x高版本支持IE8
		
    最近在做项目的时候,遇到一个安全漏洞的问题 检测到目标站点存在javascript框架库漏洞 解决办法是 将受影响的javascript框架库升级到最新版本. 好吧,就给你升吧,升完之后,我的天啊,尽 ...
    
		
    6. 
						
  6. #include <objsafe.h>//OCX控件在IE8浏览器下不能使用问题
		
    一.OCX控件开发常见的问题 1.OCX控件在IE8浏览器下不能使用问题 原因:IE8会拦截OCX控件的方法. 解决方法:在OCX控件开发时加入安全接口. (1)在有"Crtl"字 ...
    
		
    7. 
						
  7. 【转】让Bootstrap 3兼容IE8浏览器
		
    FROM : http://www.ijophy.com/2014/05/bootstrap3-compatible-with-ie8.html 最近在研究Bootstrap(官方,Github)这个 ...
    
		
    8. 
						
  8. 让Bootstrap 3兼容IE8浏览器
		
    最近在研究Bootstrap(官方,Github)这个优秀的前端框架,Bootstrap最开始是Twitter团队内部的一个前端框架,所谓前端框架就是一个CSS/HTML框架,框架里面有下拉菜单.按钮 ...
    
		
    9. 
						
  9. bootstrap3 兼容IE8浏览器
		
    近期在使用bootstrap这个优秀的前端框架,这个框架非常强大,框架里面有下拉菜单.按钮组.按钮下拉菜单.导航.导航条.面包屑.分页.排版.缩略图.警告对话框.进度条.媒体对象等,bootstrap ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 数据库语句收藏（MySQL）
			
    概览 => MySQL是一种关系数据库管理系统,关系数据库将数据保存在不同的表中,而不是将所有数据放在一个大仓库内,这样就增加了速度并提高了灵活性. =>关键字不区分大小写 => S ...
    
			
    2. 
						
  2. JavaScript的屏幕输出及时间函数
			
    Js屏幕输出 重定向页面输出: 更改输出流,如果在加载时使用则会正常排序,如果在HTML加载完成后使用,如点击事件,则会全部覆盖原HTML的内容. 1 <script> 2 //参数为输出 ...
    
			
    3. 
						
  3. 小程序入口构造工具&二维码测试工具
			
    小程序入口构造工具&二维码测试工具 本文将介绍我们小程序中隐藏的两个工具页面.原理虽不复杂,收益却实实在在,或许也能给诸君带来启发. 入口构造工具 痛点 PM&运营 投放链接 PM&a ...
    
			
    4. 
						
  4. [工具]K8tools github/K8工具合集/K8网盘
			
    K8tools 20190428 声明: 工具仅供安全研究或授权渗透,非法用途后果自负. 博客: https://www.cnblogs.com/k8gege 下载: https://github.c ...
    
			
    5. 
						
  5. python通过snmp协议运用多线程获取多台主机网卡信息，写入数据库
			
    #-*- coding:utf-8 -*- import netsnmp class SnmpClass(object): """ SNMP ""&q ...
    
			
    6. 
						
  6. 使用ANNdotNET进行情感分析
			
    2018年10月的MSDN杂志上发表了由James McCaffrey撰写的文章“使用CNTK的情感分析” .在这篇博文中,我将向您介绍这篇非常好且写得很好的MSDN文章示例.我不打算重复MSDN文章 ...
    
			
    7. 
						
  7. sql server 性能调优之 CPU消耗最大资源分析1 (自sqlserver服务启动以后)
			
    一. 概述 上次在介绍性能调优中讲到了I/O的开销查看及维护,这次介绍CPU的开销及维护, 在调优方面是可以从多个维度去发现问题如I/O,CPU,  内存,锁等,不管从哪个维度去解决,都能达到调优的效 ...
    
			
    8. 
						
  8. CentOS5/6/7系统下搭建安装Amabari大数据集群时出现SSLError: Failed to connect. Please check openssl library versions.错误的解决办法（图文详解）
			
    不多说,直接上干货! ========================== Creating target directory... ========================== Comman ...
    
			
    9. 
						
  9. 基于FineUIMVC的代码生成器(传统三层)v1.0
			
    三层我就不说了,主要是看框架思路可扩展.以前用FineUI开源版写过一版,修修改改自己用了,没有特意的整理,FineUIMVC开发还是比较快,移植了一下两天就弄完了,算是一个对新手有用的工具,先放出第 ...
    
			
    10. 
						
  10. [PHP] php + phpstudy + phpstrom + xdebug + postman开启调试
			
    主体 php + phpstudy + phpstrom + xdebug + postman + vue + chrome 使用的是前后端分离的开发方式,vue 在 webpack 通过代理进行请求 ...
    
			
    11.