1. 首頁
  2. 問答
  3. CSS背景漸變不工作在IE 8

CSS背景漸變不工作在IE 8

2011-11-18 73 views
3

我通過谷歌CDN使用JQuery UI的默認主題（晴天，如果有的話）。我想用CSS背景漸變替換ui-widget-header的默認背景。這是我的示例用法： -CSS背景漸變不工作在IE 8

<h3 class="ui-widget-header">Some Title</h3>

我的CSS是這樣的： -

.ui-widget-header { 
    background: #003366; /* default */ 
    background: -moz-linear-gradient(top center, #FFFFFF, #003366); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #FFFFFF), color-stop(1.00, #003366)); 
    background: -ms-linear-gradient(top center, #FFFFFF, #003366); 
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#FFFFFF', endColorstr='#003366'); /* IE6 & IE7 */ 
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#FFFFFF', endColorstr='#003366')"; /* IE8 */ 
}

這適用於Firefox和Safari，但IE 8拿起默認背景和過濾器不做任何事情。

我該如何解決這個問題？

來源

2011-11-18 limc

+1

在我的IE8中工作。 http://jsfiddle.net/grQN4/ – James

+0

在IE8中工作，但在兼容模式（IE7）不起作用。 – Galled

+0

@詹姆斯，我試過你的示例，它適用於IE8。我認爲這與JQuery有關。順便說一下，我沒有通過兼容模式運行。 – limc

回答

5

有與IE7/8的問題，他們不設置漸變背景如果元素沒有定義（hasLayout的）高度。

嘗試添加放大：1。如果不起作用，您可能需要設置高度，所以請嘗試高度：100％。

來源

2011-11-18 21:28:45

+0

'zoom：1'解決了這個問題......非常感謝！ – limc

3

MS的IE篩選器通常不會覆蓋.ui-widget-header所具有的背景圖像。嘗試將1px背景圖像設置爲＃003366顏色，看看是否解決了這個問題。

另外，.ui-widget-header {background-image: none;}

來源

2011-11-18 21:08:25 zungaphobia

+0

我嘗試將背景大小設置爲0並將背景圖像設置爲none，但它們不適用於我。我不認爲有必要重寫背景圖片，只是因爲我看到CSS中的固定默認顏色，而不是JQuery的背景......但不知怎的，過濾器沒有任何作用。 – limc

4

我面臨同樣的問題，但我得到了解決方案。試試這個：

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#ffffff'); /* For IE6 & IE7 */ 
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#ffffff')"; /* for IE8 */

來源

2013-03-06 07:02:01

相關問題

 相關問題