css - imagen - opacity explorer 8
Opacidad CSS no funciona en IE8 (10)
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 la mezcla de Opacity Compass , todo lo que necesita hacer es @include opacity(0.1); y se ocupará de cualquier problema entre navegadores para usted. Puedes encontrar un ejemplo aquí .
Estoy usando CSS para indicar el texto desencadenante para una sección deslizable 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 intentado una variedad de configuraciones de 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é está deteniendo IE cambiando la opacidad? Nota: He intentado esto con una variedad de elementos diferentes, intercambiando el orden de las declaraciones de CSS y simplemente usando los de IE por su cuenta. También intenté 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?
Aparentemente, la transparencia alfa solo funciona en los elementos de nivel de bloque en IE 8. Establecer visualización: bloque.
Configurarlos (exactamente como lo escribí) me ha servido cuando lo necesitaba:
-moz-opacity: 0.70;
opacity:.70;
filter: alpha(opacity=70);
Debe establecer Opacity primero para navegadores compatibles con estándares, luego las diversas 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 que cumple con los estándares y esa línea ya no es necesaria. Además, -khtml está depreciado, así que eliminé ese estilo también.
Además, los filtros de IE no validarán los estándares de w3c, así que si quiere que su página valide, separe su hoja de estilos de estándares de su hoja de estilos de IE usando una declaración de IE como la siguiente:
<!--[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 validará muy bien.
Este código funciona
filter: alpha(opacity = 50); zoom:1;
Necesitas agregar la propiedad de zoom para que funcione :)
Ninguna de las respuestas anteriores funcionó para mí, así que simplemente le di a mi etiqueta DIV una imagen de fondo transparente, que funcionó perfectamente para todos los navegadores.
No se sabe si esto todavía se aplica a 8, pero históricamente IE no aplica varios estilos a elementos que no tienen "diseño".
También puede agregar un polyfil para habilitar el uso de opacidad nativa en IE6-8.
https://github.com/bladeSk/internet-explorer-opacity-polyfill
Este es un archivo polyfil autónomo que no requiere jQuery u otras bibliotecas. Hay varias advertencias pequeñas de que no opera en los estilos en línea y para las hojas de estilo que necesitan opacidad policial deben cumplir con la política de seguridad de 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>
Usando la display: inline-block; funciona en IE8 para resolver este problema.
FWIW, opacity: 0.75 funciona en todos los navegadores compatibles con estándares.
aquí está la respuesta para IE 8
Y FUNCIONA para que alfa funcione en IE8, tienes que usar el atributo de posición para ese elemento como
posición: relativa u otra.