El filtro de gradiente IE8 no funciona si existe un color de fondo

Question

Estoy tratando de usar los siguientes estilos CSS. Están trabajando en la mayoría de los navegadores, incluido ie7. Sin embargo, en ie8, el fondo transparente no se muestra y en su lugar obtengo el color de fondo que me gustaría dejar como un color de reserva.

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 
} 

Me gustaría ser capaz de conseguir que esto funcione sin tener que recurrir a una hoja de estilos es decir, donde puedo configurar el color de fondo a ninguno. es posible?

¿Alguien sabe cómo solucionarlo?

Answer 1

Después de mirar por encima a CSS3please me di cuenta de que estaba haciendo una exageración con mis estilos de gradiente IE7/IE8. Simplemente usando el siguiente estilo hace el trabajo:

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

Al parecer, no hay ninguna necesidad de que las reglas -ms-filtro y zoom.

Answer 2

Está utilizando modernizador incorrecto. El modernizador coloca clases en el elemento HTML; no cada elemento individual. Esto es lo que utilicé en IE8 para colorear las etiquetas 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; 
} 

Answer 3

La regla del zoom es para asegurarse de que se ha activado hasLayout, su caso de uso que no lo necesita es probablemente porque hasLayout ya se está disparando.

con respecto al prefijo -ms-, de acuerdo con la documentación de Microsoft (http://msdn.microsoft.com/en-us/library/ms532847(v=vs.85).aspx desplácese hacia abajo a "Downlevel Support e Internet Explorer 4.0 Filters", no hay anclajes con los que pueda enlazar IE8, uno debe usar el -ms- prefijo, para apuntar a cualquier cosa antes de eso, uno debe usar el sin prefijo

Answer 4

Simplemente añadiendo esto como una actualización - Sé que el OP obtuvo su respuesta, pero encontré esta pregunta mientras trataba de descubrir por qué (el "retroceso" ") estaba incluso" funcionando "en IE7, me confundió sin fin, así que esto es lo que descubrí ... no funciona correctamente en IE6/7 ...

IE8 es el correcto aquí, lo que está viendo (con el código en el OP) en IE8 es el color de fondo que se ve a través de la superposición del filtro de gradiente, y como es del mismo color que hace que el degradado parezca que no funciona y que todo lo que obtener es el color sólido. ¡Eso es lo que debería suceder en todos los IE!

IE6 & 7 están ignorando incorrectamente el repliegue (lo que no es realmente un retorno) y tienen su fondo transparente color debido a un error, simplemente porque el PO tiene los colores, tanto hexagonal y RGBA especificado utilizando background-color

Hay muchas maneras de solucionar este .. ver: IE Background RGB Bug - y el último comentario sobre todo maneras - esta solución realmente sólo sería aplicable si no se usa filtros/gradientes es decir, realmente usando sólo RGBa (semitransparente) antecedentes.

Si se utiliza MS gradientes "filtro" para simular RGBA, MS Los filtros son estables volver a IE5.5 por lo que la realidad es que no es necesario un repliegue y background: none; alimentado a decir, sólo los navegadores, para anular el repliegue requerido para otros navegadores (extraño, ¡eh!) es probablemente la mejor solución en el caso original - Un color de reserva solo es necesario para las versiones de navegador anteriores de Opera (especialmente) & Firefox, Safari et al en el caso de sus gradientes/rgba aún no son compatibles.

Answer 5

Parece, usted tiene que poner el ancho o la altura de CSS DIV para el gradiente de trabajar en IE 7+ (al menos tenía a)

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

Esperanza esto ayuda

Answer 6

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

Encontré que tenía que cambiar el elemento <a> de display:inline a display:block antes de que el estilo de filtro funcionara. Además, el color se puede especificar con una secuencia de 4 bytes donde el primer byte es la opacidad, luego rgb, es decir. #oorrggbb. Eg.

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

Answer 8

La mejor solución que funcione para IE7 e IE8 es utilizar una imagen de gradiente y establecer repeat-x: verdadera, mientras que poner en el fondo. Esto funciona para todos los tipos de navegador que he encontrado.

Answer 9

puede utilizar el -ms-filtro, pero supongo que es el mismo problema que la opacidad si filtro antes -ms-filtro se produce un error en sí más en:

http://www.quirksmode.org/css/opacity.html para que la teoría

por lo que hay que hacer la siguiente manera:

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

esto funciona para mí

, además de que no se puede tener un hexcode 8 char (hexadecimal es latino para seis) y en la parte superior de esto tiene el mismo color al gradiente entre tiene que tener diferentes colores