IE8中的背景圖片外觀

Question

我有一個div，其類別為“ gradient_back”，我對其應用了背景。 在chrome和mozilla中，div看起來還可以。 但是在ie8中，它並沒有根據需要進行擴展。

這是“ gradient_back”類：

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

我不了解ie8中的這種奇怪行為。 請幫助我解決問題。

Answer 1

我不了解ie8中的這種奇怪行為。

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

請幫助我解決問題。

在較舊的瀏覽器中，我會使用CSS漸變和后備顏色。

或者，您可以嘗試將背景圖像定位在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中顯示，而不會拉伸以填充框。

您有幾種選擇：

1. 手動調整背景圖形的大小，以使其正確大小，而無需CSS對其進行縮放。

2. 使用polyfill作為background-size ，例如CSS3Pie中的那個 。

3. 使用功能檢測 （或堅持使用瀏覽器檢測）來檢測瀏覽器是否支持background-size ，並提供替代的imgage或什至僅提供純色（如果不支持）。

4. 使用CSS漸變之類的替代功能。 IE8也不支持此功能，但是您也可以為此使用polyfill（同樣，CSS3Pie對此有所涵蓋）。