2010-10-22 21 views
11

Situation: Vous avez un div avec des images de boutons. Div doit fondre en vol stationnaire. Fonctionne dans tous les navigateurs, sauf Internet Explorer. Quand je donne une couleur d'arrière-plan au div, cela fonctionne soudainement.IE8: Div Hover ne fonctionne que lorsque la couleur de fond est définie, très étrange, pourquoi?

Vérifiez: http://ListAndPlay.com, en haut à gauche sont les contrôles. Le hover ne fonctionnera pas dans IE, essayez d'ajouter une couleur de fond à #buttons et cela fonctionne soudainement.

Question: Quelle est la cause de ce problème? Comment réparer cela correctement?

+2

Très mauvaise correction de bug: ajouter une image transparente comme arrière-plan ... – MeProtozoan

Répondre

26

J'ai récemment couru à ce problème aussi. Je l'ai également résolu en ajoutant une image de fond transparente de 1 par 1 px à l'élément hover. J'avais envie de prendre une douche après.

+0

Je devais aussi prendre une douche. J'avais une solution avec un 'background: transparent' mais j'ai peut-être été dupe moi-même - quelqu'un peut vouloir jouer avec celui-ci. – Cody

1

Même avec la dernière version de IE9 j'ai ce même problème. Comme MeProtozoan suggéré, en ajoutant une image de fond transparente à l'ancre (s) obtient le comportement de travail comme souhaité, mais sacrément c'est sale.

2

Cela est dû à la disposition. L'utilisation de la position: relative donnera le même résultat sans l'utilisation d'une image de fond indésirable.

+0

Relative pos ne semble pas fonctionner [pour moi]. – Cody

9

J'ai eu ce problème juste aujourd'hui faire un div de superposition transparent apparaître lorsque survolé. IE9 n'activerait pas le vol stationnaire tant que la souris ne dépasserait pas le contenu du texte de la superposition. A travaillé très bien sur Chrome et FF4. Je n'ai pas essayé la solution de contournement d'image transparente, mais cela a fonctionné très bien: rgba(0,0,0,0). Bizarre ...

+2

Belle trouvaille, et bien mieux que d'utiliser une image transparente. Et oui, bizarre :) – Shtong

+2

cela ne fonctionnera pas dans IE6, 7, 8 car ils ne supportent pas rgba la meilleure approche est d'utiliser un png transparent 2x2 – Blowsie

2

J'ai rencontré le même problème. Pour moi, le problème semblait être lié à l'utilisation des éléments html5 (par exemple <footer> et header) dans IE8, et en oubliant d'utiliser html5shiv pour ajouter le support de ces éléments pour les navigateurs plus anciens.

Dans ce cas, l'ajout de html5shiv a résolu le problème. Aucune des autres solutions proposées n'a eu d'effet.

5

Ma solution consiste à définir une couleur d'arrière-plan sur l'élément dont vous avez besoin, puis à utiliser la propriété CSS opacity pour le masquer. Un repli est fourni pour IE sous la forme d'un filtre. Cette solution ne nécessite pas de PNG transparent et, contrairement à la solution rgba, elle fonctionne dans les anciennes versions d'IE.

0

J'ai eu le même problème avec vol stationnaire dans div ne fonctionne pas dans IE8 et changer mon doctype à

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

fixe elle.

More details here

2

J'ai le même problème avec IE8 en utilisant HTML5. Ma solution a été inspirée par Herman. Je définis une image de fond, puis je crée un arrière-plan à partir d'une partie non existante de celui-ci. Fondamentalement, je demande au navigateur d'afficher quelque chose qui est au-delà des dimensions de l'image.

background: url(myimage.png) 300px 0px no-repeat; 

Pour éviter le trafic inutile, il peut être sprite de site Web ou toute autre image valide qu'il est déjà utilisé sur la page.