Градиентный фильтр IE8 не работает, если существует цвет фона

Question

Я пытаюсь использовать следующие стили 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, где я не установил цвет фона. Это возможно?

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

Answer 1

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

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

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

Answer 2

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

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

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

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

Если использование градиентов MS «фильтра» для имитации RGBA, фильтры MS стабильны к IE5.5, поэтому реальность такова, что им не нужна запасная часть и background: none; Подано только в браузерах, чтобы переопределить запасной способ, необходимый для других браузеров (странно, а!), Вероятно, является лучшим решением в исходном случае - запасной цвет необходим только для более старых версий браузера Opera (особенно) и Firefox, Safari et al. В случае их градиентов/RGBA еще не поддерживается.

Answer 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);
}

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

Answer 4

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

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

Answer 5

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

Answer 6

Правило Zoom состоит в том, чтобы убедиться, что Haslayout был вызван, ваш вариант использования, не нуждающийся в этом, вероятно, потому что Haslayout уже запускается.

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

Answer 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 */  
}  

Answer 8

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

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

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

Кроме того