IE z-index Probleme auf element mit transparentem hintergrund

jeder.
Ich brauche 2 absolut positionierte textarea-Elemente werden übereinander platziert.
Hier ist mein Beispiel:

<div>
  <textarea id="txt1" style="position:absolute; top:0; left:0;z-index:0;background:none;">some text</textarea>
  <textarea id="txt2" style="position:absolute; top:0; left:0;z-index:1;background:none;"></textarea>
</div>

Erwarte ich txt1, um unter dem txt2. Das passiert in FF und Chrome. Aber im IE (getestet in 8 und 9) txt1 ist anklickbar und wird gefasst.

Weiß jemand, wie dies zu bewerkstelligen?

Vielen Dank im Voraus!

  • versuchen Sie es, indem Sie beide textarea in separaten div
InformationsquelleAutor Michael | 2012-02-02
  1. 12

    Internet Explorer nicht gut spielen mit "leeren" Elemente. Durch die background: none ist und keinen Inhalt, IE behandelt den top textarea als wenn Sie es nicht war.

    Um dies zu umgehen, können Sie verwenden Sie ein transparentes png für den hintergrund statt:

    background: url(/images/transparent.png) repeat scroll 0 0 transparent;

    JSFiddle: http://jsfiddle.net/j8Gkd/

    Bearbeiten

    Vorgeschlagen von @Ryan, können Sie Daten-URI hinzufügen transaparent gif-hintergrund, das heißt, Sie brauchen nicht, um daraus eine konkrete transparente png:

    background: transparent 0 0 repeat scroll url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBR‌​AA7");

    Andere Lösung, wie vorgeschlagen, in diese Antwort, ist das hinzufügen eines farbigen hintergrund mit voller Deckkraft:

    background:white; filter:alpha(opacity=1);
    • Kein problem - ich habe es mit IE, so kenne ich die meisten Fehler jetzt durch : -) vergiss nicht die Antwort akzeptieren, damit andere wissen, dass es eine funktionierende Lösung
    • Tipp: Sie können eine data-URI mit einem von 1px 1px transparentes gif wiederholt sich so weit zurück wie der IE 8. Die Regel würde so Aussehen: background: transparent 0 0 repeat scroll url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
    • schön. Es sollte enthalten in der Antwort.
    • Jetzt ist es Ende 2014, und die standards, die Menschen umschreiben Filter mit einer völlig anderen syntax (noch nicht unterstützt von IE), werde ich das mit dem transparenten image-Lösung, so dass ich keine Probleme mit zukünftigen filter-syntax.
    InformationsquelleAutor My Head Hurts
  2. 1

    Das ist ein sehr interessanter bug, den habe ich noch nie gesehen hatte. IE wirkt wie der block oben ist gar nicht da, da es nicht gerendert sichtbar.

    Scheint es mir seltsam, dass es funktioniert in FF /Webkit weil none wäre eine Einstellung für die background-image Eigenschaft. Das sollte funktionieren, find ich in Ordnung das das Kürzel-version der Eigenschaft, aber ich denke, es sollte auch verlassen die background-color auf den Standardwert gesetzt (in der Regel weiß). In jedem Fall, ich denke, ich bin falsch über diese. Und Einstellung entweder background oder background-color zu transparent nicht das problem zu beheben.

    Hier ein kleines workaround: Anstatt die Angabe background: none verwenden background-color: rgba(255, 255, 255, 0). Geben Sie einen transparenten hintergrund. Leider, es funktioniert nur im IE9.

    • Dies funktioniert im IE11 als auch.
    InformationsquelleAutor
  3. 1

    Dieser bug ist immer noch im IE11 emuliert den ie 10. Eine Reine css-workaround das ich Tat, war Kraft eine background-color und arbeiten mit:

    background-color: #000;
opacity: 0.0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; //IE8 Support

    Hab ich natürlich vergessen IE7.

    InformationsquelleAutor Pedro Alonso
Schreibe einen Kommentar