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?

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

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

-moz-opacity: 0.70;
opacity:.70;
filter: alpha(opacity=70);

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.

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

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.

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í .

Aquí está la respuesta para IE 8

Y FUNCIONA para que alpha funcione en IE8, debe usar el atributo de posición para ese elemento como

posición: familiar u otro.

http://www.codingforums.com/showthread.php?p=923730

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.

Este código funciona

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

Debe agregar la propiedad de zoom para que funcione :)

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>