z-index problème dans IE transparent div

J'ai un transparent div-élément avec un z-index supérieur qu'une img-élément sur la même page. Mais Internet Explorer est en agissant comme si le img-élément aurait plus de valeur z quand il s'agit de cliquer sur les événements.

<!DOCTYPE html>
<html>
<head>
    <title>Demo</title>
</head>
<body style="margin:0;padding:0;">
    <img src="7player.png" alt="7player" width="60" height="60" style="position:absolute; left: 100px; top: 100px; z-index:10" />
    <div style="width:100%;height:100%;position:absolute;z-index:900;" onclick="alert('hello');"></div>
</body>
</html>

En cliquant sur l'image rien ne se passe bien que l'événement click de la div-élément devrait être congédié (fonctionne dans Chrome par exemple).

Est-il une solution ou solution à mon problème?

InformationsquelleAutor Preli | 2011-06-25
  1. 22

    En fait, votre " div "N'a pas de fond",

    Vous avez besoin de lui donner une couleur de fond (blanc par exemple) avec une opacité=0.01.

    Par exemple:

     background:white; filter:alpha(opacity=1);
    • background:transparent n'a aucun effet, mais en utilisant une couleur avec un alpha de filtre fonctionne merci pour la suggestion: background:white;filter:alpha(opacity=1); hauteur=100% fonctionne parfaitement.
    • Je suis d'accord avec Preli. background:transparent ne fonctionne pas.
    • vrai, j'ai édité la réponse à la garder propre.
    • Cochez cette réponse hors - fond avec rgba le rend cliquable trop - stackoverflow.com/a/6780462/273488
    • Internet Explorer 8,7,6,... ne prennent pas en charge rgba, donc ça ne fonctionne pas.
    • Pour info pour cette cible à IE 8 seulement utiliser à la suite de hack: background: white\9; filter:alpha(opacity=1)\9;
    • Maintenant que c'est la fin de 2014, et les normes que les gens sont de réécrire les filtres avec une syntaxe différente (pas encore pris en charge par IE), je vais à l'image transparente de solution si je n'ai pas de problèmes avec les futurs filtre problèmes de syntaxe.

    InformationsquelleAutor Mo Valipour
  2. 4

    À l'aide d'une image transparente semble raisonnable de travail autour de l'IE. Cela a été déjà répondu ici:

    IE z-index de la difficulté sur l'élément avec un fond transparent

    • En fait, ce fil ici est plus vieux, donc il n'a pas déjà répondu 😉 Encore ... le truc avec la transparence de l'image est vraiment très belle.
    InformationsquelleAutor Ryan
  3. 1

    J'ai testé la Suggestion donnée par Preli background:white;filter:alpha(opacity=1), et il fonctionne très bien. Voir la Démo en IE:

    http://jsfiddle.net/VMrNF/11/

    • En fait, ce fut donnée par moi 😉
    • C'est le droit - l'idée est venue de valipour - le code est le mien. Un travail d'équipe parfait 😉 dommage qu'il a besoin d'une telle (à mon avis) laid solution de contournement pour le travail.
    InformationsquelleAutor Ahsan Rathod
  4. 1

    C'est encore un bug dans IE11, mais pas d'Arête. La suite résolu mon problème en créant un arrière-plan qui "semble" transparent mais a une couleur.

    background: rgba(255,255,255,0.0);

    Légèrement mieux que le filtre de la solution ci-dessus, si vous voulez que le fond soit transparent, mais pas le contenu de l'objet.

    InformationsquelleAutor SouthShoreAK
  5. 0

    ajouter à gauche:0 à div, cliquez sur l'événement disponible

    testé dans ie9

    • Je l'ai essayé, mais ça ne fonctionne pas avec ie8 ou ie7.
    InformationsquelleAutor emj365