自定义选择在 IE9 上不起作用答案

【问题标题】：Custom select not working on IE9自定义选择在 IE9 上不起作用
【发布时间】：2012-10-15 14:06:52
【问题描述】：

我有这个在 IE9 上表现奇怪的选择。首先，应该打开 wiki 页面的链接不能仅在 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/

【问题讨论】：

标签： html css internet-explorer-9

【解决方案1】：

我至少可以帮助您解决图标问题。问题是你用颜色覆盖了背景。 ~~您可以有颜色或背景图像。不是都。您将需要在背景中有一张基本相同但颜色不同的不同图像，悬停时不要使用图像，或者悬停时不要使用颜色。~~

很抱歉，我无法为 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 提供此信息。我也在这里学到了一些东西。

【讨论】：

-1, You can have a color or a background image. Not both. 不正确！ background: pink url('/img/icons/key.png') no-repeat;呢？
如果你不从你的答案中删除错误的陈述，那么 -1 就不会消失......只是说。
我已经达成了妥协并通过了它。但是，由于我的轻率，如果您愿意，欢迎您留下您的 -1 ;-)
恕我直言，只要它没有误导或虚假，那么它不值得任何-1......现在不是。 ;-)

【解决方案2】：

好的，对于被覆盖的图标问题，功劳归于“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

【讨论】：

【解决方案3】：

悬停时，您将覆盖background 属性。由于此属性同时具有颜色和图像，因此您也将覆盖图像。

只设置颜色，然后：

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

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

【讨论】：