自定義選擇不工作在IE9

我有這樣的選擇是在IE9表現奇怪。應該打開維基頁面所有鏈接不僅對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/

來源

2012-10-15 RulerNature

OK，用於重寫的圖標問題學分也適用於「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

來源

2012-10-29 20:12:02 Mahyar

我至少可以幫你用圖標的問題。問題在於你用顏色疊加背景。您可以有一個顏色或背景圖像。不是都。你需要要麼有不同的圖像在本質上是相同的背景，但用不同的顏色，當你懸停或當你不徘徊的顏色做而不做形象。

對不起，我不能與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這些信息在評論中提到，你可以做。我也在這裏學到了東西。

來源

2012-10-15 14:12:45

-1，'你可以有一種顏色或背景圖片。不是兩個.'不是真的！ 'background：pink url（'/ img/icons/key.png'）no-repeat;'？ – ANeves

謝謝，這是正確的。你每天學習新的東西。 –

如果你沒有從你的答案中刪除虛假陳述，那麼-1不會消失......只是說。 – ANeves

懸停要覆蓋background財產。由於此屬性具有顏色和圖像，因此您也覆蓋圖像。

僅設置顏色，然後：

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

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

來源

2012-10-15 14:39:01 ANeves

自定義選擇不工作在IE9

回答

相關問題