Почему мой фоновый градиент div не работает в IE9

Я ломал голову над тем, как заставить работать фон для DIV, используя фоновый градиент для IE9. Забавно то, что остальные градиенты отображения DIV, кроме этого.

Код, который я использую:

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr='#388EBB', endColorstr='#5D9ABA')

Чтобы лучше понять, я создал класс div под названием «таблица лидеров», который находится в верхней правой части экрана, позиция фиксирована.

Остальные элементы на странице с градиентами отображаются правильно, за исключением этого. Я делаю что-то неправильно?

РЕДАКТИРОВАТЬ

Вот как выглядит мой #response (работает абсолютно нормально)

#respond {
    -moz-box-shadow: 0 0 1px #CCCCCC;
    -webkit-box-shadow: 0 0 1px #CCCCCC;
    border-top: 1px solid #ECEDE8;
    float: left;
    margin-left: 10px;
    width: 370px;
    margin-bottom: 15px;
    background: -moz-linear-gradient(center bottom , #E8E8E8 0%, #F2F2F1 50%) repeat scroll 0 0 #F5F5F4;
    background: -webkit-gradient(linear, left top, left bottom, from(#E8E8E8), to(#f2F2F1)); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#E8E8E8', endColorstr='#F2F2F1'); /* for IE */
    -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#E8E8E8', endColorstr='#F2F2F1'); /* for IE */

}

Так выглядит .leaderboard

.leaderboard {
    border: 1px solid #5D9ABA;
    -moz-border-radius: 0px 0px 4px 4px;
    -webkit-border-radius: 0px 0px 4px 4px;
    border-radius: 0px 0px 4px 4px;
    margin: 375px auto;
    background: -moz-linear-gradient(center bottom , #388EBB 0%, #5D9ABA 50%) repeat scroll 0 0 #5D9ABA;
    background: -webkit-gradient(linear, left top, left bottom, from(#388EBB), to(#5D9ABA));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr='#388EBB', endColorstr='#5D9ABA'); /* for IE */
    -ms-filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr='#388EBB', endColorstr='#5D9ABA'); /* for IE */
    text-color: #EFEFEF;
    -moz-box-shadow: -2px 2px 5px 0px #CCCCCC;
    -webkit-box-shadow: -2px 2px 5px 0px #CCCCCC;
    box-shadow: -2px 2px 5px 0px #CCCCCC;
}

css internet-explorer-9
person Sledge81    schedule 05.05.2011    source источник
comment
Вы можете найти эту ссылку более новой: webdesignerwall.com/tutorials/cross-browser-css- градиент. Однако, кроме атрибута градиентного типа, ваш синтаксис идентичен. Возможно, в вашем коде есть ошибка или противоречие?   -  person lpd    schedule 05.05.2011
comment
Я только что обновил свой исходный вопрос вместе с кодом CSS для обоих. #respond отображается нормально, но .leaderboard не   -  person Sledge81    schedule 05.05.2011
comment
Так что я понял, как это исправить.   -  person Sledge81    schedule 05.05.2011
comment
Если вы нашли исправление, рекомендуется ответить на ваш вопрос и принять его, чтобы другие могли узнать, что сработало для вас.   -  person Shauna    schedule 05.05.2011

Ответы (3)


arrow_upward
15
arrow_downward

Это работает (обратите внимание на мои комментарии для кросс-браузерной поддержки!):

HTML

<a class="gradient border-radius multiple-background" href="#">Anchor</a>
<div class="gradient border-radius multiple-background">Div</div>

CSS

a {
display:inline-block; /* NB ie7 ele requires display:block or display:inline-block for gradient to work on anchors */
}

a,
div {
min-height:1%; /* NB ie7 ele requires haslayout for gradient to work */
}

.gradient{
background: #f8cbd6; /* Old browsers */
background: -moz-linear-gradient(top, #f8cbd6 0%, #edeeec 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8cbd6), color-stop(100%,#edeeec)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f8cbd6 0%,#edeeec 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f8cbd6 0%,#edeeec 100%); /* Opera11.10+ */
/* background: -ms-linear-gradient(top, #f8cbd6 0%,#edeeec 100%); IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8cbd6', endColorstr='#edeeec',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #f8cbd6 0%,#edeeec 100%); /* W3C */
}
/* NOSUPPORT ie7-9 for gradient AND border-radius (border-radius only supported in ie9 anyway) */

PS, если вы стремитесь объединить радиус границы, градиенты и несколько фоновых изображений (в последних сборках от 08.03.2011) в IE7-9, удачи - это все, что я могу сказать (только что провел 5 часов, экспериментируя и документируя использование случаи!).

Я собираюсь опубликовать свои выводы, которые выходят за рамки этого вопроса, но если кто-то, кто читает это, нуждается в них, напишите мне в DM / по электронной почте ([email protected]).

Лучший,

person Community    schedule 02.08.2011
comment
Ваш P.S. отсутствие поддержки градиента и радиуса границы в IE7-9 было для меня большим ударом по лбу. Господи, я устал от разработки для IE !!! - person huzzah; 24.04.2012

arrow_upward
5
arrow_downward

Ты пытался:

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr='#388EBB', endColorstr='#5D9ABA')"; /* for IE */

Цитаты нужны. Кроме того, чтобы вещи работали во всех версиях IE, вам нужно поставить -ms-filter до filter.

person robertc    schedule 05.05.2011
comment
Это работает для меня в IE9: Режим документа: IE8, но не в режиме IE9... есть идеи, почему? - person onetwopunch; 26.03.2014
comment
@jryancanty IE9 удаляет префикс -ms-, я полагаю. - person TylerH; 25.03.2015
comment
@jryancanty Как я уже сказал, чтобы все работало во всех версиях IE, вам нужно поставить -ms-filter перед фильтром. - person robertc; 25.03.2015

arrow_upward
2
arrow_downward

IE использует формат #AARRGGBB, 8-значный номер. Цвета, которые он использовал, состоят всего из 6 цифр.

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr='#388EBB', endColorstr='#5D9ABA'); /* for IE */

ссылка:

http://msdn.microsoft.com/en-us/library/ms532930%28v=vs.85%29.aspx

person curriegrr    schedule 16.06.2011
comment
Вы имеете в виду, что те, которые он использовал, были 6, а в этом документе Microsoft говорится, что их должно быть 8. Однако хороший! - person rkulla; 29.08.2012
comment
Да извините, оказывается граф не моя сильная сторона. Отредактировал его, чтобы сделать его правильным, спасибо за голову. - person curriegrr; 03.09.2012