我在谷歌浏览器中有一个非常奇怪的图像悬停问题。
当我将鼠标悬停在菜单上时，我会在Mozilla和IE中获取背景图像，但不会在Chrome中显示。
我使用以下CSS脚本作为菜单项。
.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;}
它与Internet Explorer和Mozilla一起正常运行。虽然它没有显示在Chrome中悬停的菜单的背景图像。有人可以帮帮我吗？
答案 0 :(得分：0)
我希望回答不是太晚了？
这种情况正在发生，因为在悬停时会触发display:block;，而WebKit似乎并不喜欢。如果您将display:block;属性从ul.sb_menu li a:hover, ul.ex_menu li a:hover移至ul.sb_menu li a, ul.ex_menu li a
当你在这里时，将width:200px;和height:25px;移动到同一个地方可能是有意义的。顺便说一句，这不应该影响它在IE，Firefox或Opera中的显示方式。
答案 1 :(得分：0)
您只是遇到与此主题相同的问题：chrome does not render gif background image
如果在悬停时应用了GIF图像，则无法正确渲染GIF图像（即img：hover）。
所以你有几个选择：