Eingabefelder mit transparentem Hintergrund sind in IE8 nicht anklickbar

StackOverflow https://stackoverflow.com/questions/2098714

Frage

Ich habe ein absolut positioniertes Eingabefeld in Form eines Formulars. Das Eingabefeld hat transparenten Hintergrund:

.form-page input[type="text"] {
    border: none;
    background-color: transparent;
    /* Other stuff: font-weight, font-size */
}

Überraschenderweise kann ich dieses Eingabefeld nicht auswählen, indem ich in IE8 darauf klicke. Es funktioniert jedoch perfekt in Firefox. Das gleiche passiert für background: none. Wenn ich die Hintergrundfarbe ändere:

    background-color: red;

Es funktioniert gut, daher ist dies ein Problem, das mit transparentem Hintergrund verbunden ist. Wenn Sie einen Rand einstellen, wird das Eingabefeld ausgewählt, indem Sie nur auf den Rand klicken.

Gibt es eine Problemumgehung, die anklickbares Eingabefeld mit transparentem Hintergrund in IE8 funktioniert?

Aktualisieren: Beispiel. Überzeugung background-color und die Eingabebox ist ausgewählt. Sie können auch auf das Feld auswählen und das Eingabefeld durch Drücken der Registerkarte "Shift+" konzentrieren.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head></head><body>

<style type="text/css">
  input[type="text"] {
    border: none;
    background: transparent;
    /*background-color: blue;*/
  }
  #elem528 { position:absolute; left:155px; top:164px; width:60px; height:20px; }
  #elem529 { position:absolute; left:218px; top:164px; width:40px; height:20px; }
</style>

<img src="xxx.png" alt="" width="1000" height="1000">
<input id="elem528" maxlength="7" type="text">
<select id="elem529"></select>

</body></html>
War es hilfreich?

Lösung

Ich kann ein solches Problem in IE8 nicht reproduzieren. Vollständiger Testfall? Sind Sie sicher, dass es kein Layering -Problem gibt, das ein anderes transparentes Element dazu veranlasst, den klickbaren Bereich abzudecken?

Legt Einstellung background-image Einen Unterschied machen? Was ist mit einem transparenten GIF?

ETA: Neugierig! Es ist eigentlich ein IE7 -Fehler. Für mich zeigt Ihr Beispiel das beschriebene Verhalten in IE7, aber in IE8 ist es nur dann im Emulseie7 -Modus; In IE8 Native Rendering ist es repariert. Sie möchten im Allgemeinen sicherstellen, dass Sie nicht auf das IE7 -Rendering zurückfallen, indem Sie einen geeigneten Fall verwenden X-UA-Compatible Header/Meta; Ja, das Festlegen der background-image zu einem transparenten GIF hat das Problem für mich behoben. TSK, wir brauchen noch in der heutigen Zeit das leere GIF, oder?

Andere Tipps

Sie müssen ein (transparentes) Hintergrundbild definieren.

Nur für den Fall, dass jemand interessiert wäre. Eine der vorgeschlagenen Problemumgehungen ....

Bitte geben Sie das HTML für das Eingabeelement an.

Wie haben Sie das Eingabeelement definiert? Der folgende Code funktioniert in IE8 (IE 8.0.7600 Windows). Ich habe es in IE8 ausprobiert und konnte den Eingabebereich gut auswählen.

<html>

<head>

<style>
.form-page input[type="text"] {
        border: none;
        background-color: transparent;
        /* Other stuff: font-weight, font-size */
}
</style>
</head>

<body>

<input type="text" name="test" value="test" id="test"/>

</body>
</html>

Geben Sie dem Eingangsfeld einfach ein transparentes Hintergrundbild und es wird funktionieren ...

Beispiel: 

#search .input {
width:260px;
padding:3px 5px;
border:0;
background:url(../images/trans.gif);}

Ich habe das gleiche Problem mit IE10 unter Windows 7 gefunden. Beide folgenden Methoden haben das Problem für mich behoben.


Frankys Methode unter Verwendung eines transparenten Hintergrundbildes ...

background:url(/images/transparent.gif);


Die Methode von Sketchfemme unter Verwendung einer RGBA -Hintergrundfarbe mit der Deckkraft von '0'

background-color:rgba(0,0,0,0);


Jim Jeffers Vorschlag für die Bearbeitung der Z-Index hat bei mir nicht funktioniert.

Hier ist ein sehr einfacher Testfall:

<html>
    <head>
    </head>
    <body style="direction: ltr;">
        <br/><br/><br/>
        <INPUT style="WIDTH: 100%;" />

        <DIV style="POSITION: absolute; TOP: 58px; RIGHT: 193px; WIDTH: 300px;">
            <INPUT style="WIDTH: 100%; background-color: transparent;"/>
        </DIV>
    </body>
</html>

Beim Laufen in IE8 sollten Sie sich den Fokus auf das zugrunde liegende Textfeld stattdessen auf dem absolut positionierten Textfeld sehen.

Unsere Lösung bestand darin, sowohl transparente Hintergrundfarbe als auch transparentes Hintergrundbild festzulegen:

<INPUT style="WIDTH: 100%; background-color: transparent; background-image: url('transparent.gif');"/>

IE in seiner unendlichen Weisheit beschließt, den Gegenstand nicht zu rendern, weil er glaubt, dass es nichts zu rendern gibt. Es gibt zahlreiche Möglichkeiten, dies anzugehen, aber im Grunde müssen Sie dem IE etwas geben, das Sie kauen können.

Das Hinzufügen eines 'value = x' zum Eingabe -Tag selbst funktioniert definitiv. Aber höchstwahrscheinlich ist es nicht die beste Lösung. Eine einfache Farbe: Schwarz (ohne Fokus) ermöglicht es dem Element, auf das Element zu sein. Das Hinzufügen ': Fokus' auf den Eingabestil ermöglicht das Element zum Rendern.

Versuche dies:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head></head><body>

<style type="text/css">
  input[type="text"]:focus {
    border: none;
    background: transparent;
    /*background-color: blue;*/
  }
  #elem528 { position:absolute; left:155px; top:164px; width:60px; height:20px; }
  #elem529 { position:absolute; left:218px; top:164px; width:40px; height:20px; }
</style>

<img src="xxx.png" alt="" width="1000" height="1000">
<input id="elem528" maxlength="7" type="text">
<select id="elem529"></select>

</body></html>

Wie Bobince bemerkte, ist es ein IE7 -Fehler. Ich fand es manchmal bequem, es durch Hinzufügen von a zu lösen value=" &nbsp; &nbsp; &nbsp; ". Verwenden Sie so viele nicht sprechende Räume wie erforderlich, um den klickbaren Bereich groß genug zu machen. Abhängig von Ihrer App müssen Sie diese möglicherweise später ausziehen.

 background-image:url(about:blank);background-color:transparent;

Hatte ein ähnliches Problem -> IE8 Textbox war nicht bearbeitet (wenn Wrapper meiner App Position hat: absolut). Klicken Sie nur in der Grenze. Gefüllt mit Farbe und transparent funktionierte auch nicht. Mit der folgenden DOCType -Änderung wird das Problem behoben.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Quelle : http://www.codingforums.com/showthread.php?p=1173375#post1173375

Eigentlich war es in meinem Fall wie wie

text-indent: -9999px

Ich habe den Text früher entfernt, tun Sie das nicht und er ist erneut anklickbar.

Es mag seltsam erscheinen, aber Sie sollten versuchen, den Z-Index der beteiligten Elemente explizit anzugeben. Dies sollte die Eingabe dazu zwingen, über das Element mit der darauf angewendeten Hintergrundfarbe/dem aufgebrachten Hintergrund zu rendern.

Es scheint jedoch, dass selbst mit dem transparenten GIF -Trick, wenn Sie Hintergrund festlegen: transparent irgendwo anders in Ihrem CSS, für tatsächliche Webbrowser, es löst den IE7 -Fehler aus und Sie erhalten keinen Cursor für Schwebe das Eingabefeld.

Das ist eine großartige Frage. Ohne diesen Beitrag hätte ich nie herausfinden können, was los war. Meine Lösung war jedoch zu verwenden rgba(0,0,0,0) anstelle von transparentem GIF.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top