Google 크롬의 CSS 이미지 호버링 문제

Google 크롬에서 매우 이상한 이미지 호버 문제가 있습니다.Google 크롬의 CSS 이미지 호버링 문제

마우스를 메뉴 위로 가져 가면 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에서 마우스를 가져 가면 메뉴에 대한 배경 이미지가 표시되지 않습니다. 누구든지 제발 도와 주실 래요?

출처

2010-12-14 user542061

페이지에 대한 링크를 게시 할 수 있습니까? –

jsfiddle에 페이지를 업로드하거나 사람들이 문제를 제대로 볼 수 있도록 사이트의 링크를 공유하는 것이 좋습니다. – Blowsie

아니면 ... 우리는 당신에게 맡깁니다. – Trufa

내가 대답하기에는 아직 늦지 않았 으면 좋겠습니까?

display:block;이 (가) 호버에서 실행 중이며 WebKit이 마음에 들지 않으므로 이런 현상이 발생합니다. 당신이 그것에있는 동안 당신이 ul.sb_menu li a, ul.ex_menu li a

에 ul.sb_menu li a:hover, ul.ex_menu li a:hover에서 display:block; 속성을 이동하면 그것은 작동합니다, 아마 의미뿐만 아니라 같은 장소에 width:200px; 및 height:25px;을 이동 만들 것입니다. IE, Firefox 또는 Opera에서 나타나는 방식에 영향을 미치지 않습니다.

출처

2011-02-17 06:26:56 tagawa

당신은 단순히이 스레드에서 같은 문제를 가지고있다 : (. : 호버 즉 IMG)들이 가져가 적용되는 경우 chrome does not render gif background image

GIF 이미지 크롬에서 제대로 렌더링되지 않습니다. 이미지가 애니메이션하지 않는 경우

: 그래서

당신은 몇 가지 옵션을 가지고, 주위에 작업을 사용하여 질문 chrome does not render gif background image의 답변을 참조하십시오 이미지가 움직이는 경우
이미지의 형식을 변경

출처

2014-04-10 12:58:51

Google 크롬의 CSS 이미지 호버링 문제

답변

관련 문제