50 votes

Les zones de saisie avec un arrière-plan transparent ne sont pas cliquables dans IE8

J'ai une position absolue zone de saisie dans un formulaire. La zone d'entrée a l'arrière-plan transparent:

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

Étonnamment, je ne peux pas sélectionner la case de saisie en cliquant sur dans IE8. Il fonctionne parfaitement sous Firefox mais. La même chose se passe pour background: none. Lorsque je change la couleur d'arrière-plan:

 background-color: red;

Il fonctionne très bien, c'est donc associé avec un fond transparent. Définition d'une frontière de la zone d'entrée sélectionnable en cliquant sur sa bordure.

Est-il une solution pour avoir cliquable zone de saisie avec arrière-plan transparent de travail dans IE8?

Mise À Jour: Exemple. Décommentez background-color et l'inputbox est sélectionnable. Vous pouvez également cliquer sur la case de sélection, et l'accent de la zone de saisie en appuyant sur Maj+Tab.

<!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>

27voto

bobince Points 270740

Je n'arrive pas à reproduire ce problème avec IE8. Plein de cas de test? Êtes-vous sûr il n'y a pas de superposition problème à l'origine de certains autres élément transparent pour couvrir la zone cliquable?

Est-ce que fixer background-image faire une différence? Que penser d'un GIF transparent?

ETA: Curieux! C'est en fait un bug IE7. Pour moi, votre exemple illustre le comportement décrit dans IE7, mais dans IE8 c'est seulement lorsque EmulateIE7 mode; dans IE8 natif de rendu c'est corrigé. Vous aurez généralement voulez vous assurer que vous ne tombez pas en arrière à la version IE7 rendu en utilisant un adapté X-UA-Compatible - tête/meta; cependant, oui, réglage de l' background-image d'un GIF transparent résolu le problème pour moi. Tsk, nous avons encore besoin de la vierge GIF, même dans cette journée et l'âge, hein?

8voto

Viliam Points 2219

Vous devez définir une image d'arrière-plan (transparente).

Juste au cas où quelqu'un serait intéressé. Une des solutions suggérées ....

7voto

user250120 Points 672

S'il vous plaît inclure le code HTML pour l'élément d'entrée.

Comment avez-vous défini l'élément d'entrée? Le code ci-dessous fonctionne dans IE8 (IE 8.0.7600 Windows). J'ai essayé cela dans IE8 et j'étais capable de "sélectionner" parfaitement la zone de saisie.

 <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>
 

6voto

Franky Points 51

Il suffit de donner au champ de saisie une image d’arrière-plan transparente et cela fonctionnera ...

Exemple:

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

2voto

user328508 Points 21

Voici un cas de test très simple:

 <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>
 

Lors de l'exécution dans IE8, vous devriez voir le focus sur la zone de texte sous-jacente plutôt que sur la zone de texte positionnée de manière absolue.

Notre solution consistait à définir à la fois la couleur de fond transparente et l'image de fond transparente:

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

Amit

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X