2011-10-24 3 views
0

Si vous regardez le menu de navigation principal sur this page vous voyez que j'utilise une ombre portée sur un: hover, cependant, dans IE9 l'ombre est boguée - elle ne s'affiche pas toujours, et reste souvent après que le vol stationnaire n'est plus actif. Je veux soit le réparer, ou se débarrasser de l'ombre seulement dans IE.Bogue Ombre portée dans IE9

mon css est:

#menu a { 
    color:#fff; 
    padding-top:10px; 
    padding-right:10px; 
    padding-left:10px; 
    text-decoration:none; 



} 

#menu a:hover { 

background:#e58f56; 
border-top: 0px solid transparent; 
border-bottom: 10px solid transparent; 
border-left: 10px solid #bbb2b1; 
border-right: 0; 
border-top-right-radius:5px; 
border-bottom-right-radius:5px; 
-webkit-box-shadow: #888 4px 4px 4px; 
-moz-box-shadow: #888 4px 4px 4px; 
box-shadow: #888 4px 4px 4px; 



} 

Toutes les idées?

+0

ajouter -ms-box-shadow (aller de l'avant et ajouter -o-box-shadow aussi) – albert

+1

IE9 utilise la propriété 'box-shadow' standard, donc pas besoin de' -ms-box-shadow' (en fait, je ne suis pas sûr si une version préfixée existe même puisque IE ne supportait pas box-shadow jusqu'à la version 9 de toute façon). – daGUY

Répondre

0

Je viens de déposer votre code ci-dessus dans un violon js et ça a bien fonctionné dans IE9! Doit être quelque chose à faire avec le 'tarte' fixer votre appel. Peut-être essayer de le retirer et d'avoir un chèque.

L'effet que vous tentez est certainement «pouvoir» dans IE9 .. N'abandonnez pas :)!

+0

'pie' 'js fiddle' ?? – Findo

0

Êtes-vous sûr que l'ombre ne s'affiche pas du tout? La mise en œuvre de IE9 de box-shadow rend le flou à environ la moitié de la distance que les autres navigateurs font (j'ai effectivement posté une question à ce sujet here). Pour les valeurs faibles, il est possible que le rendu d'IE9 soit si léger que vous ne le remarquiez pas. Juste comme un test, essayez de faire le rayon de flou beaucoup plus grand pour voir si elle apparaît dans IE9.

+0

Salut, oui, ça se voit parfois, et il reste souvent après la souris ... – Findo

+0

Je ne vois pas pourquoi cela ne fonctionnerait pas comme vous l'avez fait. Peut-être essayer d'ajouter 'box-shadow: none;' à la déclaration '#menu a'? – daGUY

0

Si vous ne voyez pas DropShadow, c'est probablement que votre IE9 est en mode d'affichage de compatibilité. Essayez de définir explicitement dans votre page le compatibiltiy avec IE9 avec un code comme:

<meta http-equiv="X-UA-Compatible" content="IE=8; IE=9; IE=10; IE=11" /> 

Dans l'en-tête de votre page, avant d'appeler une Css.