Internet Explorer CSS-Eigenschaft „Filter“ ignoriert Überlauf: sichtbar

Question

Offenbar Internet Explorer (bis Version 8 zumindest) ignoriert Überlauf: sichtbar wenn Filter (zB für die Opazität) Anwendung, etwas außerhalb des gefilterten Element verursacht werden abgeschnitten als ob Überlauf: versteckte wurden verwendet.

Gibt es zu diesem Verhalten Problemumgehungen?

Der Beispielcode unten zeigt, wie Kind durch Behälter abgeschnitten wird – nur seine rechten und unteren Grenzen sind sichtbar.

<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

Es scheint, dass die Abhilfe dafür ist einfach: Verwenden Sie -ms-Filter statt Filter:

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

Answer 2

Zuerst eine interessante Anmerkung: IE9 scheint korrekt Überlauf zu ehren: sichtbar, auch wenn IE8 emuliert wird.

Zweitens, eine allgemeine Problemumgehung für dieses Problem wäre, Ihre #Container und #Child Geschwister von einander innerhalb eines gemeinsamen Elternteils zu machen. Der gemeinsame Elternteil würde keinen Filter haben (was bedeutet, dass der Überlauf korrekt funktioniert), und Sie würden den Filter, den Sie benötigen, auf #container anwenden.

Weil #child nicht mehr wirklich ein Kind von Container ist, wird es Ihren Filter jedoch nicht empfangen. Dies kann ein Problem sein oder nicht, und eine mögliche Lösung besteht darin, denselben Filter auch auf #child anzuwenden. Ich sage, dass dies eine "mögliche Lösung" ist, weil der Filter auf die zwei Elemente unabhängig angewendet wird, dann kann das Komponieren der Elemente identisch sein oder nicht und erst dann wird der Filter auf diese Komposition angewendet. Es hängt davon ab, was der Filter ist und ob sich die Elemente überlappen oder nicht. Auch wenn es nicht identisch ist, könnte es "nahe genug" sein.

Wenn Ihre Seite einen Doctype hat, der sie in den Standardmodus versetzt (anstelle des Quirksmodus, in dem der IE standardmäßig keine Doctype verwendet), stellen Sie möglicherweise fest, dass Filter nicht auf untergeordnete Elemente angewendet werden position: static (der Standardwert, wenn keine Position angegeben ist). Wenn Sie entweder position: absolute oder position: relativ für das Kind angeben, wird der Filter für das übergeordnete Element nicht auf das untergeordnete Element angewendet. Im Allgemeinen ist dies eine schlechte Sache, aber ein Nebeneffekt ist, dass es Überlauf verursacht: sichtbar, um richtig zu arbeiten.

Wenn Sie diese Lösung übernehmen, haben Sie das gleiche Problem, dass Sie den Filter möglicherweise auch auf das untergeordnete Element anwenden müssen.