IE9에서 사용자 지정 선택이 작동하지 않습니다.

Question

IE9에서 이상한 동작을하고 있습니다. 위키 페이지를 열어야하는 첫 번째 링크는 IE9 브라우저에서만 작동하지 않고 두 번째 문제는 마우스 오버시에 커서가 도움말을 넘겨주고 아이콘에서 로그 오프 할 때 호버 배경색으로 덮어 쓰게되는 이유는 무엇입니까?

<ul id="main"> 
     <li class="username" tabindex="1" > <a>USER</a> 
      <ul class="curent_buser"> 
       <li class="help"><a href="http://www.wikipedia.org/">Help</a></li> 
       <li class="logoff"><a href="http://www.wikipedia.org/">LogOff</a></li> 
      </ul> 
     </li> 
    </ul> 

CSS :

ul#main { 
    color: gray; 
    width: 120px; 
    border-left: 1px solid #f2f2f2; 
    border-right: 1px solid #f2f2f2; 
    border-top: 1px solid #f2f2f2; 
    list-style: none; 
    font-size: 12px; 
    letter-spacing: -1px; 
    font-weight: bold; 
    text-decoration: none; 
    height:30px; 
    background:green; 
} 



ul#main:hover { 
    opacity: 0.7; 
    text-decoration: none; 
} 

#main > li{ 
    background: url('http://cdn1.iconfinder.com/data/icons/crystalproject/24x24/actions/1downarrow1.png') 100% 0 no-repeat; 
    outline:0; 
    padding:10px; 
} 

ul#main li ul { 
    display: none; 
    width: 116px; 
    background: transparent; 
    border-top: 1px solid #eaeaea; 
    padding: 2px; 
    list-style: none; 
    margin: 7px 0 0 -3px; 
} 


ul.curent_buser li a { 
    color: gray;; 
    cursor: pointer; 
} 
ul.curent_buser{ 
    background:lime !important;  
    } 


    ul#main li ul li a { 
    display: block; 
    padding: 5px 0; 
    position: relative; 
    z-index: 5; 
} 


#main li:focus ul, #main li.username:active ul { 
    display: block; 
} 

.help{ 
    background: url("http://cdn1.iconfinder.com/data/icons/musthave/16/Help.png") no-repeat 100% center ; 
    height: 25px; 
    margin-bottom: 2px; 
    border-bottom: 1px solid white; 
}  

.help:hover{  
background: #f4f4f4; 


} 

.logoff{ 
    background: url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/on-off.png") no-repeat 100% center ; 
    height: 25px; 
} 


.logoff:hover{ 
    background: #f4f4f4 ; 
    height: 25px; 
} 

.help a,.logoff a{ 
    color:gray; 
    font-family: Museo700Regular,sans-serif; 
    letter-spacing: 0; 
    font-size: small; 
} 

​ 

바이올린 : 아이콘의 문제에 http://jsfiddle.net/RwtHn/1455/

Answer 1

확인, 재정의 된 아이콘 문제 학점은 "ANeves"간다하지만 당신은 여분 방지하기위한 CSS 이하로 사용할 수 있습니다 :

는 만 색상을 설정합니다 코드 줄 :

#main > li > ul > li:hover 
{ 
    background-color: #f4f4f4; 
} 

---

IE9의 클릭 문제에 대한

, 단지 CSS 아래 추가 :

#main ul:hover 
{ 
    display: block; 
} 

을하고 그것에게 http://www.cssplay.co.uk/menus/cssplay-click-click.html

Answer 2

내가 할 수있는 최소한의 도움을. 문제는 당신이 색깔로 배경을 overridding하는 것입니다. 색상 또는 배경 이미지를 가질 수 있습니다. 둘 다 아닙니다. 본질적으로 동일하지만 색상이 다른 다른 이미지를 배경에 두거나, 마우스를 올려 놓을 때 이미지가 없거나 마우스를 올려 놓을 때 색상이 없어도됩니다.

죄송합니다. IE 문제에 더 도움이되지 않습니다. IE와 같은 것을 진심으로 싫어합니다.

편집 :이이 정보에 대한

.logoff:hover{ 
      background: #f4f4f4 url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/on-off.png"); 
      height: 25px; 
    } 

감사 ANeves 아래의 코멘트에 언급 한 바와 같이 당신이 할 수있는 무언가이다. 나는 여기에도 무언가를 배웠다.

Answer 3

호버시 background 속성을 무시하고 있습니다. 이 속성에는 색상과 이미지가 모두 있으므로 이미지도 재정의합니다.

,

.help:hover{  
    background-color: #f4f4f4; 
} 
.logoff:hover{ 
    background-color: #f4f4f4 ; 
} 

http://jsfiddle.net/RwtHn/1456/