Opacity CSS no funciona en IE8

143

Estoy usando CSS para indicar el texto desencadenante para una sección deslizable de jQuery: es decir, cuando pasa el cursor sobre el texto desencadenante, el cursor cambia a un puntero y la opacidad del texto desencadenante se reduce para indicar que el texto tiene una acción de clic .

Esto funciona bien en Firefox y Chrome, pero en IE8 la opacidad no cambia.

He probado una variedad de configuraciones CSS sin ningún éxito.

Por ejemplo

HTML:

<h3 class="slidedownTrigger">This is the trigger text</h3>

CSS:

.slidedownTrigger
{
    cursor: pointer;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
    filter: alpha(opacity=75);
    -khtml-opacity: 0.75;
    -moz-opacity: 0.75;
    opacity: 0.75;
}

¿Qué impide que IE cambie la opacidad? Nota: He intentado esto en una variedad de elementos diferentes, cambiando el orden de las declaraciones CSS y simplemente usando las IE por su cuenta. También he intentado usar

-ms-filter: "alpha(opacity=75)";

Pero sin éxito.

Me he quedado sin cosas para intentar que la modificación de opacidad funcione en IE8.

¿Algunas ideas?

Marcus Downing
fuente
Esta pregunta relacionada / duplicada tiene su respuesta, creo. stackoverflow.com/questions/859000/opacity-in-web-pages
Jeff Martin
Vi esa pregunta: el problema es la respuesta: <br> <br> & nbsp; & nbsp; filtro: alfa (opacidad = 50); / * internet explorer / <br> & nbsp; & nbsp; opacidad: 0.5; / fx, safari, opera, chrome * / <br> & nbsp; & nbsp; -ms-filter: "progid: DXImageTransform.Microsoft.Alpha (opacidad = 50)"; / * IE8 * / <br> <br> no funciona para mí (solo lo intenté nuevamente para verificar). Lo apliqué a un h3 que era negro y audaz. En Firefox y Chrome, la configuración de opacidad convierte el encabezado en gris, como era de esperar, pero en IE8 permanece en negro.
Uy - no nos dimos cuenta que no llega a utilizar HTML en los comentarios - pero yo creo que se puede ver lo que estoy tratando de decir
si prueba esos estilos solo en un div de color sólido, ¿funcionan? Tal vez hay algún otro CSS que está en conflicto.
Jeff Martin
Buena esa. Sí, cuando hago un div simple, le doy una altura y un ancho y un color de fondo rojo, con esa configuración de opacidad, funciona en IE8. Sale semi-opaco. Sin embargo, estoy luchando por ver cuál es el problema. No estoy modificando la opacidad de cualquier otra cosa en la hoja de estilo, por lo que no puedo pensar qué podría estar en conflicto con ella solo para IE.

Respuestas:

65

No tengo idea si esto todavía se aplica a 8, pero históricamente IE no aplica varios estilos a elementos que no "tienen diseño".

ver: http://www.satzansatz.de/cssd/onhavinglayout.html

Azeem.Butt
fuente
9
IE no aplica varios estilos a elementos que no "tienen diseño".
Azeem.Butt
44
¡Excelente! Gracias. Ese fue el problema. Los elementos para los que estaba tratando de ajustar la opacidad (por ejemplo, h3) no "tenían diseño". Una vez que les di algo, la opacidad funcionó. Todo lo que hice fue agregar ancho: 100%; a la h3. Gracias por señalarme en la dirección correcta. Sin embargo, parece una locura (si no tiene errores) que Internet Explorer haga esto.
51
IE no aplica muchos estilos a muchos elementos.
danwellman
1
@danwellman y luego hace muchas otras cosas "divertidas" también. Hurra.
dudewad
Lo interesante es que IE7 no necesita el "diseño". Estoy usando una imagen de fondo receptiva en un elemento con altura cero padding-bottom: 100%y, en IE8, la opacidad no tuvo efecto hasta que configuré la altura explícita. IE7 no necesita esto.
Kout
158

Configurar esto (exactamente como lo he escrito) me ha servido cuando lo necesitaba:

-moz-opacity: 0.70;
opacity:.70;
filter: alpha(opacity=70);
Gabriel McAdams
fuente
66
Gracias, creo "filter: alpha (opacity = 70);" es para IE <8. Sin embargo, no funciona (para mí) en IE8 (acabo de comprobar). -moz-opacity ahora está prácticamente desaparecido, creo, y la opacidad es la forma estándar de hacer las cosas, por lo que, naturalmente, Microsoft no usó esa forma de hacer las cosas (demasiado fácil).
15
Solo configurar la "opacidad" y el "filtro" como usted describió fueron suficientes para que funcione para mí tanto en FF4 como en IE8. -moz-opacity no era necesario.
demoncodemonkey
1
@Gabriel McAdams: filtro: alfa (opacidad = 70); trabajado (pero solo en IE 8)
Poonam Bhatt
@Gabriel ¡Eso funcionó de maravilla! ¡No tendré más problemas de opacidad en IE 7/8!
MJCoder
1
Información más específica: en realidad se desvanece en el método que elimina la transparencia.
tmorell
49

Primero debe configurar Opacidad para los navegadores que cumplen con los estándares, luego las diferentes versiones de IE. Ver ejemplo:

pero este código de opacidad no funciona en ie8

.slidedownTrigger
{
    cursor: pointer;
    opacity: .75; /* Standards Compliant Browsers */
    filter: alpha(opacity=75); /* IE 7 and Earlier */
    /* Next 2 lines IE8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=75);
}

Tenga en cuenta que eliminé -moz ya que Firefox es un navegador compatible con los estándares y esa línea ya no es necesaria. Además, -khtml se deprecia, por lo que eliminé ese estilo también.

Además, los filtros de IE no se validarán según los estándares w3c, por lo que si desea que su página se valide, separe su hoja de estilo de estándares de su hoja de estilo de IE utilizando una declaración if de IE como se muestra a continuación:

<!--[if IE]>
<link rel="stylesheet" type="text/css"  href="http://www.mysite.com/css/ie.css" />
<![endif]-->

Si separa las peculiaridades, es decir, su sitio se validará bien.

Kevin Florida
fuente
3
Solo configurar la "opacidad" y el "filtro" como usted describió fueron suficientes para que funcione para mí tanto en FF4 como en IE8. La sección etiquetada "/ * Siguiente 2 líneas IE8 * /" no era necesaria.
demoncodemonkey
3
@demoncodemonkey: Correcto. Todo depende de la versión que haya instalado. Si quieres la máxima compatibilidad te sugiero todos ellos.
Kevin Florida
Correcto, pero: "Para garantizar que los usuarios de Internet Explorer 7 y 8 experimenten el filtro, puede incluir las dos sintaxis enumeradas anteriormente. Debido a una peculiaridad en nuestro analizador, debe incluir la sintaxis actualizada primero antes de la sintaxis anterior. para que el filtro funcione correctamente en la Vista de compatibilidad (este es un error conocido y se solucionará en la versión final de IE8). Aquí hay un ejemplo de hoja de estilo CSS: "(fuente: enlace )
zrathen
@ Kevin "Si quieres la máxima compatibilidad te sugiero a todos". Bueno, entonces, no deberías haber eliminado -moz-opacity, ¿verdad?
Espeluznante
Las citas no son necesarias para -ms-filter.
Thdoan
17

Aparentemente, la transparencia alfa solo funciona en elementos de nivel de bloque en IE 8. Establecer pantalla: bloque.

Bonnie V.
fuente
17

Usando display: inline-block;trabajos en IE8 para resolver este problema.

FWIW, opacity: 0.75funciona en todos los navegadores que cumplen con los estándares.

crmpicco
fuente
5

CSS

Solía ​​usar lo siguiente de CSS-Tricks :

.transparent_class {
  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

  /* IE 5-7 */
  filter: alpha(opacity=50);

  /* Netscape */
  -moz-opacity: 0.5;

  /* Safari 1.x */
  -khtml-opacity: 0.5;

  /* Good browsers */
  opacity: 0.5;
}

Brújula

Sin embargo, una mejor solución es usar el mixin Opacity Compass , todo lo que necesita hacer es hacerlo @include opacity(0.1);y se encargará de cualquier problema entre navegadores. Puedes encontrar un ejemplo aquí .

d4nyll
fuente
2

Ninguna de las respuestas anteriores funcionó para mí, así que le di a mi etiqueta DIV una imagen de fondo transparente, que funcionó perfectamente para todos los navegadores.

Darren Riches
fuente
1

Este código funciona

filter: alpha(opacity = 50); zoom:1;

Debe agregar la propiedad de zoom para que funcione :)

mejiwara
fuente
1

También puede agregar un polyfil para permitir el uso de opacidad nativa en IE6-8.

https://github.com/bladeSk/internet-explorer-opacity-polyfill

Este es un polyfil independiente que no requiere jQuery u otras bibliotecas. Hay varias pequeñas advertencias de que no funciona en estilos en línea y para cualquier hoja de estilo que necesite opacidad polyfil'd deben cumplir con la política de seguridad del mismo origen.

El uso es muy simple

<!--[if lte IE 8]>
    <script src="jquery.ie-opacity-polyfill.js"></script>
<![endif]-->

<style>
    a.transparentLink { opacity: 0.5; }
</style>

<a class="transparentLink" href="#"> foo </a>
Chris Marisic
fuente