El "filtro" de la propiedad CSS de Internet Explorer ignora el desbordamiento: visible

internet-explorer filter

Question

Aparentemente Internet Explorer (hasta la versión 8 al menos) ignora el desbordamiento: visible al aplicar el filtro (por ejemplo, para la opacidad), haciendo que cualquier elemento fuera del elemento filtrado sea recortado como si se utilizara el desbordamiento: oculto .

¿Hay alguna solución para este comportamiento?

El código de ejemplo siguiente muestra cómo se recorta el contenedor por niño : solo se ven los bordes derecho e inferior.

 <style type="text/css">
  #container {
   position:absolute;
   left:100px;
   top:100px;
   width:100px;
   height:100px;
   border:1px solid black;
   filter:alpha(opacity=50);
   overflow:visible;
  }

  #child {
   position:relative;
   left:-10px;
   top:-10px;
   width:20px;
   height:20px;
   border:1px solid red;
  }
 </style>

 <div id="container">
  <div id="child"></div>
 </div>

Answer 1

Parece que la solución a esto es simple: use -ms-filter en lugar de filter :

-ms-filter:''progid:DXImageTransform.Microsoft.Alpha(opacity=50)'';

Answer 2

Primero, una nota interesante: IE9 parece cumplir correctamente con el desbordamiento: visible, incluso al emular IE8.

En segundo lugar, una solución general a este problema sería hacer que sus hermanos #container y #child entre sí dentro de un padre común. El padre común no tendría filtro (lo que significa que el desbordamiento funcionará correctamente), y usted aplicaría el filtro que necesita a #container.

Debido a que #child ya no es realmente un elemento secundario del contenedor, sin embargo, no recibirá su filtro. Esto puede o no ser un problema, y ​​una posible solución es aplicar el mismo filtro a #child también. Digo que esta es una "solución posible" porque aplicar el filtro a los dos elementos de forma independiente, entonces componerlos puede o no ser idéntico a la composición de los elementos primero, y luego aplicar el filtro a esa composición. Depende de qué es el filtro y de si los elementos se superponen o no. Incluso si no es idéntico, podría ser "lo suficientemente cerca".

Finalmente, si su página tiene un doctype que lo pone en modo estándar (en lugar del modo peculiar al que IE falla cuando no hay doctype), puede observar que los filtros no se aplican a elementos secundarios a menos que el niño tenga una posición: estática ( el predeterminado cuando no se especifica ninguna posición). Especificar cualquiera de las posiciones: absoluta o posición: relativa en el niño hará que el filtro en el padre no se aplique al niño. En general, esto es algo malo, pero un efecto secundario es que causará desbordamiento: visible para funcionar correctamente.

Si adopta esta solución, tendrá el mismo problema que puede necesitar aplicar el filtro al elemento hijo también.