0

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

这是“gradient_back”类：

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

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

4

3 回答 3

3

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

第一个支持background-size的 Internet Explorer版本是版本 9。

请帮我解决问题。

我会在旧浏览器中使用CSS 渐变并回退到纯色。

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

于 2013-04-29T06:45:41.937 回答
1 
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>
于 2013-04-29T07:08:03.673 回答
1

IE8 不支持 CSSbackground-size功能。因此，您的background-size:auto 100%遗嘱不会产生任何影响；不会发生缩放，并且背景将在 IE8 中显示而不会拉伸以填充框。

你有几个选择：

  1. 手动调整背景图形的大小，使其大小正确，无需 CSS 进行缩放。

  2. 使用polyfill background-size，例如CSS3Pie中的。

  3. 使用特征检测（或浏览器检测，如果你坚持的话）来检测浏览器是否支持background-size，如果不支持，则提供替代图像，甚至只是纯色。

  4. 使用 CSS Gradients 之类的替代功能。这在 IE8 中也不支持，但是您可以再次为此使用 polyfill（同样，CSS3Pie 已经涵盖了这一点）。

于 2013-04-29T08:55:49.503 回答