Фоновый градиент CSS не работает в IE 8

Question

Я использую стандартную тему JQuery UI (солнечно, если это имеет значение) через Google CDN.Я хочу заменить фон по умолчанию для ui-widget-header на градиент фона CSS.Это мой пример использования: -

<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 .Если это не сработает, вам, вероятно, придется установить высоту, поэтому попробуйте height: 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

Фильтры IE для MS часто не переопределяют background-image, которое имеет .ui-widget-header.Попробуйте установить фоновое изображение размером 1 пиксель в цвет # 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/