背景大小 100% 在 IE8 和 IE7 中不起作用答案

【问题标题】：Background-size 100% not working in IE8 and IE7背景大小 100% 在 IE8 和 IE7 中不起作用
【发布时间】：2014-08-22 01:53:36
【问题描述】：

我有一个空 div，其中包含一个大于容器大小的背景图像。我通过background-image 属性修复了这个值（100% 100%）。这很好，直到您在 IE8 和 IE7 中打开示例。任何解决方案，甚至是 javascript 脚本或 jquery 插件？

即：http://jsbin.com/imirer/1/edit

即：http://jsfiddle.net/bPTzE/

HTML：

<div class="container">
    <div class="background"></div>
</div>

CSS：

.container {
    /* an example width for responsive perpose */
    width: 500px;
}

.background {
    height: 27px;
    background: url("http://s18.postimage.org/jhbol7zu1/image.png") no-repeat scroll 100% 100% transparent;

    /* not working in IE8 and IE7 */
    background-size: 100% 100%;
}

【问题讨论】：

IE7-8 不支持 background-size 属性，见：caniuse.com/background-img-opts
我认为这是同一个问题：stackoverflow.com/questions/2991623/…
为什么要用div里面的div来设置背景？希望你知道这没有任何意义？
我为一个小型设备 MarcinWolny 制作了容器 div
我知道不支持 darma，但我需要一些 JS 解决方案

标签： css internet-explorer cross-browser

【解决方案1】：

因为 background-size 是 CSS3 特定的，IE 不支持你必须做这样的事情才能在 IE 中工作

将您的 html 和正文设置为

html {overflow-y:hidden}
body {overflow-y:auto}

用 div #page-background 包裹你想要全屏显示的图像

#page-background {position:absolute; z-index:-1}

然后把它放到你的html文件中

<div id="page-background">
  <img src="/path/to/your/image" width="100%" height="100%">
</div>

** 你将不得不使用某种重置来删除边距和填充，就像这样

html, body {height:100%; margin:0; padding:0;}

【讨论】：

【解决方案2】：

ie7 和 ie8 不支持背景大小。

您可以在 div 标签中使用 put 'tag' 并为其添加 100% 的宽度。它是完全可扩展的。

试试这个代码：

<div class="container">
    <img src="http://s18.postimage.org/jhbol7zu1/image.png" width="100%" />
</div>

或

html:

<div class="container">
    <img src="http://s18.postimage.org/jhbol7zu1/image.png" />
</div>

css:

.container img {
     width:100%
 }

【讨论】：

你能再详细解释一下吗？