在IE8中的背景圖像外觀

我有一個div，其中class爲「gradient_back」，我應用了背景。 div在鉻和mozilla中看起來不錯。但在ie8中，它不會根據需要進行擴展。在IE8中的背景圖像外觀

這裏是類gradient_back「：

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

我不理解在這IE8怪異的行爲。請幫我解決問題。

來源

2013-04-29 Chetana Kestikar

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-29 07:08:03

感謝您的幫助。但它不工作。背景圖像滑落，現在上方留有空白區域。 – 2013-04-29 07:15:49

你可以給我你的網站的網址？ – 2013-04-29 07:26:02

您可以製作兩個單獨的漸變圖像，並根據以上所述更改html。 – 2013-04-29 08:54:57

我不理解ie8中的這種奇怪的行爲。

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

請幫我解決這個問題。

我會在舊版瀏覽器中使用CSS gradients並回退到純色。

或者，您可以嘗試將背景圖像定位在100% 100%而不是縮放它。

來源

2013-04-29 06:45:41 Quentin

+1 for CSS fallback。 – FreeSnow 2013-04-29 09:06:01

IE8不支持CSS background-size功能。因此你的background-size:auto 100%不會有任何影響;不會出現縮放，並且背景將在IE8中顯示，而不會伸展以填充框。

您有幾種選擇：

手動調整你的背景圖片，以便它無需CSS來縮放尺寸正確。
對background-size使用填充，例如CSS3Pie中的填充。
使用feature detection（或者，如果你堅持的瀏覽器檢測）來檢測瀏覽器是否支持background-size，如果它不提供一種替代imgage甚至只是一個普通的純色。
使用CSS漸變等替代功能。這在IE8中也不被支持，但是你可以使用一個polyfill來實現這一點（同樣，CSS3Pie也包含了這一點）。

來源

2013-04-29 08:55:49 Spudley

在IE8中的背景圖像外觀

回答

相關問題