Question

我正在通过Google CDN使用JQuery UI的默认主题（晴天，如果这很重要）。我想用CSS背景渐变替换ui-widget-header的默认背景。这是我的示例用法： -

<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正在拾取默认背景，过滤器不会执行任何操作。

我该如何解决这个问题？

Answer 1

IE7 / 8存在一个问题，即如果元素没有定义高度（hasLayout），它们不会设置渐变背景。

尝试添加 zoom：1 。如果它不起作用，您可能需要设置高度，因此请尝试高度：100％。

Answer 2

我遇到了同样的问题，但我得到了解决方案。试试这个：

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 */

Answer 3

MS的IE过滤器通常不会覆盖.ui-widget-header所具有的背景图像。尝试将1px背景图像设置为＃003366颜色，看看是否能解决问题。

或者，.ui-widget-header {background-image: none;}

Answer 4

这是一个非常棒的资源，不仅可以回答渐变问题（在网页的下方），而且还解决了IE 7 8 9的透明度，边框半径，方框和问题。文字阴影和背景颜色透明度。

http://coding.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/

CSS背景渐变不适用于IE 8

4 个答案: