Подтвердить что ты не робот

Фильтр градиента IE8 не работает, если существует цвет фона

Я пытаюсь использовать следующие стили CSS. Они работают в большинстве браузеров, включая ie7. Однако в ie8 прозрачный фон не отображается, и вместо этого я получаю фоновый цвет, который я хотел бы оставить установленным как запасной цвет.

section.rgba{
    background-color: #B4B490;
    background-color: rgba(200, 0, 104, 0.4);  
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#99B4B490',EndColorStr='#99B4B490');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#99B4B490',EndColorStr='#99B4B490')";
    zoom: 1
}

Я хотел бы иметь возможность заставить это работать, не прибегая к стилю IE, где я устанавливаю цвет фона на none. Возможно ли это?

Кто-нибудь знает, как это исправить?

4b9b3361

ОТВЕТЫ

Ответ 1

Оглянувшись на CSS3please, я понял, что делаю переполнения со стилями градиента IE7/IE8. Просто используя следующий стиль делает работу:

filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999');

По-видимому, нет необходимости в правилах -ms-filter и zoom.

Ответ 2

Просто добавив это как обновление - я знаю, что OP получил свой ответ, но я нашел этот вопрос, пытаясь понять, почему он ( "резервный" ) даже "работал" в IE7, он путал меня без конца вот что я узнал.. он не работает должным образом в IE6/7...

IE8 является правильным здесь, то, что вы видите (с кодом в OP) в IE8, является цветом фона, отображаемым через наложение градиентного фильтра, и как тот же цвет, который делает градиент выглядит так, как будто он не работает, и что все, что вы получаете, это сплошной цвет. Что должно произойти во всех IE!

IE6 и 7 неправильно игнорируют резервную копию (так что это не совсем резервный) и имеют прозрачный фоновый цвет из-за ошибки, потому что OP цвета, как hex, так и RGBa, указанные с помощью background-color

Есть много способов обхода этого.. см. Исходная ошибка RGB в IE - и последний комментарий, особенно для путей - это обходное решение было бы действительно применимо только в том случае, если не использовать фильтры/градиенты, то есть реально использовать только RGBa (полупрозрачные) фоны.

При использовании MS "filter" Gradients для имитации RGBa фильтры MS стабильны для IE5.5, так что реальность такова, что им не нужны резервные и background: none; поданные в браузеры только для IE, чтобы переопределить резервную копию требуемый для других браузеров (странный huh!), вероятно, лучшее решение в оригинальном случае. Резервный цвет необходим только для более старых версий браузера Opera (особенно) и Firefox, Safari и др. в случае их градиентов /rgba еще нет поддерживаются.

Ответ 3

Похоже, вы должны поместить ширину или высоту в DIV CSS для градиента, чтобы работать в IE 7+ (по крайней мере, мне пришлось)

.widget-header {

    text-align: center;
    font-size: 18px;
    font-weight: normal;
    font-family: Verdana;
    padding: 8px;
    color: #D20074;
    border-bottom: 1px solid #6F6F6F;
    height: 100%;
    /* Mozilla: */
    background: -moz-linear-gradient(top, #FFFFFF, #E2E2E2); 
    /* Chrome, Safari:*/
    background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#E2E2E2));
    /* MSIE */
    filter : progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#E2E2E2');
    /* Opera 11.10 + */
    background-image: -o-linear-gradient(top, #FFFFFF, #E2E2E2);
}

Надеюсь, что это поможет

Ответ 4

Я обнаружил, что мне пришлось изменить элемент <a> с display:inline на display:block, прежде чем стиль фильтра будет работать. Кроме того, цвет может быть задан с 4-байтовой последовательностью, где первый байт является непрозрачностью, затем rgb, т.е. #oorrggbb. Например.

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffA0C848', endColorstr='#ff70A828');
display:block;

Ответ 5

Вы неправильно используете Modernizer. Модернизатор помещает классы в элемент HTML; а не каждый отдельный элемент. Вот что я использовал в IE8 для цветных тегов SECTION.

.rgba section {
    background-color: rgba(200, 0, 104, 0.4);
}
.no-rgba section {
    background-color: #B4B490;
}
.no-cssgradients section {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#99B4B490',EndColorStr='#99B4B490');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#99B4B490',EndColorStr='#99B4B490')";
    zoom: 1;
}

Ответ 6

Правило масштабирования состоит в том, чтобы убедиться, что hasLayout был запущен, ваш прецедент не нуждается в этом, вероятно, потому, что hasLayout уже запущен.

в отношении префикса -ms- в соответствии с документацией Microsoft (http://msdn.microsoft.com/en-us/library/ms532847(v=vs.85).aspx прокрутите вниз до "Поддержка уровня нисходящего потока и фильтры Internet Explorer 4.0" нет привязок, на которые я могу ссылаться), чтобы настроить IE8, нужно использовать префикс -ms-prefix, чтобы нацелить что-либо до этого, нужно использовать неподписанный

Ответ 7

#element {  
    background: -moz-linear-gradient(black, white); /* FF 3.6+ */  
    background: -ms-linear-gradient(black, white); /* IE10 */  
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #000000), color-stop(100%, #ffffff)); /* Safari 4+, Chrome 2+ */  
    background: -webkit-linear-gradient(black, white); /* Safari 5.1+, Chrome 10+ */  
    background: -o-linear-gradient(black, white); /* Opera 11.10 */  
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff'); /* IE6 & IE7 */  
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff')"; /* IE8+ */  
    background: linear-gradient(black, white); /* the standard */  
}

Ответ 8

Лучшим решением, которое работает для IE7 и IE8, является использование градиентного изображения и установка repeat-x: true при помещении его в фоновом режиме. Это работает для всех типов браузеров, которые я нашел.

Ответ 9

вы можете использовать -ms-filter, но я предполагаю, что он имеет ту же проблему, что и непрозрачность, если вы фильтруете до того, как -ms-filter он терпит неудачу:

http://www.quirksmode.org/css/opacity.html для этой теории

поэтому вам нужно сделать следующее:

background-color: #D5D6D7;
background-image: linear-gradient(bottom, rgb(213,214,215) 0%, rgb(251,252,252) 100%);
background-image: -o-linear-gradient(bottom, rgb(213,214,215) 0%, rgb(251,252,252) 100%);
background-image: -moz-linear-gradient(bottom, rgb(213,214,215) 0%, rgb(251,252,252) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(213,214,215) 0%, rgb(251,252,252) 100%);
background-image: -ms-linear-gradient(bottom, rgb(213,214,215) 0%, rgb(251,252,252) 100%);
background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0, rgb(213,214,215)),
    color-stop(1, rgb(251,252,252))
);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#D5D6D7',EndColorStr='#FBFCFC')";
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#D5D6D7', endColorstr='#FBFCFC');

это работает для меня

кроме того, что вы не можете использовать шестнадцатеричный код размером 8 char (шестнадцатеричный латинский шрифт для шести), и, кроме того, у вас одинаковый цвет с градиентом между разными цветами