Internet Explorer CSS propiedad "filtro" hace caso omiso de overflow: visible

Question

Aparentemente Internet Explorer (hasta la versión 8 como mínimo) ignora overflow: visible al aplicar filtro (por ejemplo, en cuanto a opacidad), haciendo nada fuera del elemento de filtrado para ser recortado como si se usara desbordamiento: oculto.

¿Hay alguna solución a este problema?

El código de ejemplo siguiente muestra cómo niño se recorta por contenedor – sólo su derecho e inferior de las fronteras son visibles.

<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: Uso -ms-filtro en lugar de filtro :

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

Answer 2

En primer lugar, una nota interesante: IE9 parece cumplir correctamente 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 de otro 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.

Porque #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".

Por último, 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 posición: estática (por defecto 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.