Question

我有一个div，其类为“gradient_back”，我已应用了背景。 div在chrome和mozilla中看起来不错。但是在ie8中它并没有根据需要扩展。

这是“grad_back”类：

.gradient_back{
   width:100%;
   float:left;        
   background:url(images/gradient.gif) repeat-x 0 0;      
   background-size:auto 100%;
 }

我不理解ie8中这种奇怪的行为。请帮我解决问题。

Answer 1

我不理解ie8中这种奇怪的行为。

到support background-size的Internet Explorer的第一个版本是版本9.

请帮我解决问题。

我会在旧浏览器中使用CSS gradients并回退为纯色。

或者，您可以尝试将背景图像定位在100% 100%而不是缩放它。

Answer 2

I think so, you should change some html like this.

<style type="text/css">
.top-gradient{
    width:100%;
    float:left;        
    background:url(images/top-gradient.gif) repeat-x 0 top;  
}
.bottom-gradient{
    width:100%;
    float:left;        
    background:url(images/bottom-gradient.gif) repeat-x 0 bottom;  
}
</style>

<div class="top-gradient">
    <div class="bottom-gradient">Your page content will go here</div>
</div>

Answer 3

IE8不支持CSS background-size功能。因此，background-size:auto 100%不会产生任何影响;不会出现缩放，并且背景将在IE8中显示而不会拉伸以填充框。

您有几个选择：

手动调整背景图形大小，使其尺寸正确，无需使用CSS进行缩放。
对background-size使用填充，例如CSS3Pie中的填充。
使用feature detection（或浏览器检测，如果您坚持）检测浏览器是否支持background-size，并提供替代的支持，如果不支持则提供纯色。
使用CSS Gradients等替代功能。在IE8中也不支持这一点，但你可以再次使用polyfill（再次，CSS3Pie已经涵盖了这一点）。

IE8中的背景图像外观

3 个答案: