背景大小100％不工作在IE8和IE7 [英] Background-size 100% not working in IE8 and IE7

问题描述

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

I have an empty div which contain a background image that is bigger than the size of the container. I fix this one by background-image property with the value (100% 100%). That's fine until you open the example in IE8 and IE7. Any solutions for that, even a javascript script or jquery plugin?

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

ie： 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%;
}

推荐答案

具体哪些是不支持的IE你必须这样做它在IE中工作

since background-size is CSS3 specific which is not supported to IE you have to do something like this for it to work in IE

将你的HTML和正文设置为

set your html and body to

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

将您想要全屏显示的图片换成div＃page-background

wrap the image you want fullscreened with a div #page-background

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

然后将其放在您的html文件中

then put this in your html file

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

**您将不得不使用某种重置来移除边距和paddings

** you will have to use some sort of reset to remove the margins and paddings, something like this

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

这篇关于背景大小100％不工作在IE8和IE7的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！