Internet Explorer CSS proprietà "filtro" ignora troppo pieno: visibile

Question

A quanto pare Internet Explorer (fino alla versione 8, almeno) ignora trabocco: visibile quando si applica filtro (ad esempio per l'opacità), provocando nulla al di fuori l'elemento filtrato per essere troncato come se overflow : nascosto sono stati utilizzati.

Esistono soluzioni alternative per questo comportamento?

Il codice di esempio qui sotto mostra come bambino è ritagliato da contenitore – solo il suo destro e inferiore confini sono visibili.

<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

Sembra che la soluzione a questo è semplice: utilizzare -ms-filtro piuttosto che filtro:

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

Answer 2

In primo luogo, una nota interessante: IE9 sembra onorare correttamente overflow: visibile, anche quando si emula IE8.

In secondo luogo, una soluzione generale a questo problema potrebbe essere quella di rendere #contenitori e #child fratelli l'uno dell'altro all'interno di un genitore comune. Il genitore comune non avrebbe alcun filtro (il che significa che l'overflow funzionerà correttamente) e applicherebbe il filtro necessario a # container.

Poiché #child non è più un figlio di contenitore, tuttavia, non riceverà il filtro. Questo può o non può essere un problema, e una possibile soluzione è applicare lo stesso filtro anche a #child. Dico che questa è una "possibile soluzione" perché applicare il filtro ai due elementi in modo indipendente, quindi la loro composizione può o non può essere identica alla composizione degli elementi prima, quindi applicare il filtro a quella composizione. Dipende dal filtro e dal fatto che gli elementi si sovrappongano o no. Anche se non è identico, potrebbe essere "abbastanza vicino".

Infine, se la tua pagina ha un doctype che la colloca in modalità standard (invece della modalità quirks a cui IE fa il default quando non c'è doctype), potresti notare che i filtri non si applicano agli elementi figli a meno che il bambino non abbia position: static (l'impostazione predefinita quando non è specificata alcuna posizione). Specificando una delle posizioni: assoluta o posizione: relativa sul figlio, il filtro sul genitore non verrà applicato al figlio. Generalmente, questa è una cosa negativa, ma un effetto collaterale è che causerà un overflow: visibile per funzionare correttamente.

Se si adotta questa soluzione, si avrà lo stesso problema che potrebbe essere necessario applicare il filtro anche all'elemento figlio.