Градиентный фильтр 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. Возможно ли это?

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

13
css3 filter gradient internet-explorer-8 rgba

9 ответов

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

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

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

28

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

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

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

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

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

9

похоже, вам нужно поместить ширину или высоту в 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);
}

надеюсь, что это помогает

7

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

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

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

.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;
}
2

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

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

0
#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

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

0

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

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 hexcode (hex-латинский для шести), и поверх этого у вас есть тот же цвет для градиента между вами должны быть разные цвета

0