Image CSS hover Problème dans Google Chrome

Question

J'ai un problème de survol de l'image très étrange dans Google Chrome.

Lorsque je passe la souris sur le menu, j'obtiens mon image d'arrière-plan dans Mozilla et IE, mais pas dans Chrome.

J'ai utilisé le script CSS suivant pour l'élément de menu.

.content_resize { padding-right:0; padding-top:16px; width:930px;background-color:#fff; } 
.content .mainbar { float:left; width:630px;} 
.content .newstick { float:center; width:650px;} 
.content .mainbar img { margin-bottom:24px; padding:4px; border:1px solid #b7b7b7; background-color:#fff;} 
.content .mainbar img.fl { float:left; margin-right:12px;} 
.content .mainbar .article, .content .sidebar .gadget { margin:0; padding:0 0 16px 0;} 
.content .sidebar { float:right; width:276px;} 
ul.sb_menu, ul.ex_menu { margin:0; padding:0; list-style:none; color:#959595;} 
ul.sb_menu li, ul.ex_menu li { margin:0; } 
ul.sb_menu li { padding:4px 0; border-bottom:1px solid #e3e3e3; width:220px;} 
ul.ex_menu li { padding:4px 0 8px;} 
ul.sb_menu li a, ul.ex_menu li a { color:#5f5f5f; text-decoration:none; margin-left:-16px; padding-left:5px;} 

ul.sb_menu li a:hover, ul.ex_menu li a:hover { color:#FFFFFF; font-weight:bold; display:block; width:200px ; height:25px; background:url(images/menu_bg.gif) no-repeat left top;} 

ul.sb_menu li a:hover { text-decoration:underline;} 
ul.ex_menu li a:hover { text-decoration:none;} 
.content .scroll { float:left; background:url(images/scroll_bg.gif) no-repeat left top; display:block; margin-left:35px; height:200px; width:180px; OVERFLOW: hidden;background-color:transparent;} 

Cela fonctionne très bien avec Internet Explorer et Mozilla. Alors que son n'apparaît pas l'image de fond pour le menu sur le vol stationnaire en chrome. Quelqu'un peut-il m'aider s'il-vous-plaît?

Answer 1

Pas trop tard pour que je réponde, j'espère?

Cela se produit car display:block; est déclenché sur hover, ce que WebKit ne semble pas aimer. Il devrait fonctionner si vous déplacez la propriété display:block; de ul.sb_menu li a:hover, ul.ex_menu li a:hover à ul.sb_menu li a, ul.ex_menu li a

Pendant que vous y êtes, il serait probablement judicieux de déplacer width:200px; et height:25px; au même endroit aussi bien. Cela ne devrait pas affecter la façon dont il apparaît dans IE, Firefox ou Opera, d'ailleurs.

Answer 2

Vous rencontrez simplement le même problème que sur ce fil: chrome does not render gif background image

images GIF sont pas rendus correctement par le chrome si elles sont appliquées sur le vol stationnaire (c.-à-img:. Vol stationnaire).

Vous avez deux options:

1. Si vos images ne sont pas animées: changer le format de vos images
2. Si vos images sont animées: utilisez un travail autour, voir les réponses de question chrome does not render gif background image