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

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

13 голосов
/ 22 декабря 2010

Я пытаюсь использовать следующие стили 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. Возможно ли это?

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

Ответы [ 9 ]

28 голосов
/ 07 февраля 2011

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

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

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

9 голосов
/ 10 июня 2011

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

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

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

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

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

7 голосов
/ 08 ноября 2011

Похоже, вы должны указать ширину или высоту для 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 голосов
/ 14 ноября 2012

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

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffA0C848', endColorstr='#ff70A828');
display:block;
2 голосов
/ 24 января 2011

Вы используете Модератор неправильно.Модернизатор помещает классы в элемент 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;
}
0 голосов
/ 09 октября 2013

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

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');

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

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

0 голосов
/ 26 марта 2013

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

0 голосов
/ 09 апреля 2012 
#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 */  
}
0 голосов
/ 06 мая 2011

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

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

...