Internet Explorer passez comportement ne fonctionne pas

Je vais avoir des problème avec IE9. Lorsque vous passez la souris .photo-nav .photo-nav-icône doit devenir visible. Cela fonctionne bien dans tous les autres navigateur, j'ai essayé.

Ici est ma marque:

<div class="photo-content">
    <img class="photo-img" src="/Images/empty.gif" />
    <div class="photo-nav prev" data-direction="prev">
        <div class="photo-nav-icon prev"></div>
    </div>
    <div class="photo-nav next" data-direction="next">
        <div class="photo-nav-icon next"></div>
    </div>
</div>

Et voici mon CSS:

.photo-content { position: relative; width: 600px; height: 400px; margin: 0 auto; }
.photo-img { width: 600px; height: 400px; display:block; }
.photo-nav { position: absolute; height: 400px; width: 72px; }
.photo-nav.prev { top: 0; left: 0; }
.photo-nav.next { top: 0; right: 0; }
.photo-nav-icon { height: 60px; width: 60px; display: none; }
.photo-nav-icon.prev { margin: 170px 0 0 10px; }
.photo-nav-icon.next { background-position: 0 -60px; margin: 170px 10px 0 0; }
.photo-nav:hover > .photo-nav-icon { display: block; }

Ici est un Violon du problème.

Veuillez noter; les frontières dans le Violon ne font PAS partie de la conception. Ils ne sont là que pour montrer le cadre, puisque les images ne sont pas disponibles. Cependant, il est intéressant de noter, c'est que IE ne reconnaissent la frontière de la photo-nav div et pourra alors réagir de hover, mais pas le corps de la div.

Un autre point à souligner: Si je change l'img pour un div et de l'utilisation de l'image de fond d'écran au lieu de cela, c'est à dire semble fonctionner correctement, mais cela entraîne d'autres problèmes, comme je l'impossible/pas au courant comment raccorder l'événement onload de l'image d'arrière-plan.

Enfin, le doctype est <!DOCTYPE html>

Je ne suis pas sûr de ce que vous entendez par "clic" puisque c'est un hover problème, mais comme je l'ai dit, la frontière n'est pas partie de ma conception réelle, mais passez la souris sur le Violon cause de l'effet voulu. J'ai fait de considérer que le positionnement absolu est un problème, mais comme je l'ai dit, si je change l'img à une div, il fonctionne très bien.
Je voulais dire :hover .. comme dans passez la souris sur le bord gauche de .photo-nav et vous verrez .photo-nav-icon apparaissent, c'est clair que sa largeur s'est effondré pour quelque raison que ce qui semble comme il ne fonctionne pas
Oui, la frontière n'travail, mais malheureusement, la frontière n'est pas une partie de ma réelle de la conception finale. Je ne sais pas pourquoi elle serait l'effondrement depuis que j'ai donné l' .photo-nav une largeur, et la .photo-nav-l'icône a une largeur.
Même c'est un peu étrange, je suis encore à essayer de comprendre pourquoi ..
Été tirant sur mes cheveux pendant des heures!

OriginalL'auteur iGanja | 2013-05-03

3

J'ai été incapable de trouver autre chose à propos de ce problème, d'autres que d'autres ont vécu la même chose. Passez la souris ne fonctionne pas dans Internet Explorer

Que Woody a suggéré, ce problème peut être surmonté en y ajoutant de la couleur d'arrière-plan, mais bien sûr, même avec un minimum d'opacité, ce n'est pas de l'INTERFACE utilisateur, nous voulons que la navigation doit être transparent.

Un fix je l'ai fait tomber sur a été de définir l'opacité de la propriété de l' .photo-nav-icône plutôt que la propriété d'affichage:
```
.photo-nav-icon { background-image: url(/Images/nav.png); height: 60px; width: 60px; opacity:0; }
.photo-nav:hover > .photo-nav-icon { opacity:1; }
```
Cela ne fonctionne que pour l'icône elle-même et ne peut toujours pas répondre à une de survoler l'ensemble .photo-nav div, et je n'aime pas utiliser opacité, tout comme chaque navigateur a sa propre façon de les gérer.

Donc, comme il est dit dans l'autre post, j'ai simplement ajouté une image gif transparente que le fond de la .photo-nav div et qui a résolu le problème:
```
.photo-nav { position: absolute; height: 400px; width: 72px; background:url(/Images/empty.gif); }
```
Je ne suis pas très heureux avec cette solution, mais il fonctionne.

il ne se sent comme un ie bug depuis la autres de gérer votre code comme prévu. même si c'est ennuyeux, je voudrais juste ajouter un commentaire explicatif de la CSS décrivant le comportement défectueux. en supposant que vous n'avez pas besoin d'ie8 de soutien, vous pourrait aller pour un rgba(0,0,0,0) contexte bien que c'est aussi un hack

OriginalL'auteur iGanja
1

Il fonctionne si vous donnez .photo-nav fond (ex: rgba(0,0,0,0.25), mais je n'ai aucune idée pourquoi. J'ai pensé que c'était peut-être un z-index de problème, mais en donnant la .photo-nav un z-index > 0 n'a pas d'aide ici.

IE est seulement la détection de la souris sur la bordure sinon, il semble penser que la souris n'est pas sur la photo-nav - même chose avec la JS souris fonctions d'écouteur.

Tellement de choses qui font ce travail sont les suivants :

a) Donner la .photo-nav éléments de fond.
b) Supprimer position:relative .du contenu de l'image

Un arrière-plan; oui, c'est la seule chose que j'ai trouvé qui fonctionne. Je vais poster ma réponse bientôt, mais j'espérais que quelqu'un allait venir avec quelque chose de plus élégant et offre une raison pourquoi c'est à dire est de se comporter comme cela. Retrait de la position relative cause l' .photo-nav-icône de divs à l'écran, mais ils ne peuvent pas être positionnés correctement sinon. Merci pour vos idées!

OriginalL'auteur Woody

Vous devez vous connecter pour publier un commentaire.