为什么我的图片在 IE 中无法点击？

Question

希望有人可以帮助我解决我在使用 IE 时遇到的这个问题。所以我正在处理的页面有一张包含 Facebook、Twitter 和 Youtube 选项卡的图片。

除了 Internet Explorer (7/8) 之外，所有这些选项卡在大多数其他浏览器 (Chrome/Safari/Firefox/Opera) 中都是可点击的。我不确定我在这里做错了什么，有人可以帮助我吗？

HTML（已编辑）：

<div id="head">
    .
    .
    .
    <div id="icons">
        <ul class="nav1">
            <li></li>
            <li><a id="facebook" rel="_blank" href="https://www.facebook.com">&nbsp;</a></li>
            <li><a id="twitter" rel="_blank" href="https://twitter.com">&nbsp;</a></li>
            <li><a id="youtube" rel="_blank" href="https://www.youtube.com">&nbsp;</a></li>
        </ul>
    </div>
    .
    .
    .
</div>

CSS（已编辑）：

#icons {
    position:absolute;
    top:44px;
    right:200px;
    z-index:9;
    float:left;
    /*width:105px;*/
    height:35px;
    /*background:url(/images/sprite_header_icons.png) no-repeat -6px 0;*/
}
#icons ul.nav1{
    height: 35px; /*added*/
}
#icons ul.nav1 li {
    display: inline;
    padding-left: 1px;
height: 35px !important; /*added*/ 
}
#icons ul.nav1 li a {
    display: inline;
    /*width: 34px;
    height: 31px;*/
}
ul.nav1 li a:hover {

}
#icons ul.nav1 li a#facebook {
    padding-left: 20px;
    padding-right: 13px;
    padding-bottom: 28px;
    background:url(/images/sprite_header_icons.png) no-repeat -6px 0; /*added*/
    width: 20px; /*added*/
    height: 35px; /*added*/
}
#icons ul.nav1 li a#twitter {
    padding-left: 20px;
    padding-right: 13px;
    padding-bottom: 28px;   
    background:url(/images/sprite_header_icons.png) no-repeat -40px 0; /*added*/
    width: 20px; /*added*/
    height: 35px; /*added*/

}
#icons ul.nav1 li a#youtube {
    padding-left: 20px;
    padding-right: 13px;
    padding-bottom: 28px;
    background:url(/images/sprite_header_icons.png) no-repeat -74px 0; /*added*/
    width: 20px; /*added*/
    height: 35px; /*added*/
}

注意：

好的，所以我根据 Ryan Beaulieu、Alex Reynolds 和 OhMrBigshot 的建议进行了一些更改。现在，选项卡在 IE (7/8) 中是可点击的……但是，这些选项卡是部分可见的（li 38px x 16px），如下所示：

宽度很好，但是如何将高度从 16px 增加到 35px？ 谢谢！！

Answer 1

尝试添加 display:block

#icons {
    position:absolute;
    top:44px;
    right:200px;
    z-index:9;
    float:left;
    width:210px;
    height:30px;
    background:url(/images/sprite_header_icons.png) no-repeat -6px 0;
}
#icons ul.nav1 li {
    display: inline;
    float:left;
    padding-left: 1px;
}
#icons ul.nav1 li a {
    float:left;
    display:block;
    width: 34px;
    height: 31px;
}

Answer 2

你在使用 rel="_blank" 吗？那是HTML5吗？你用的IE版本是9吗？难道你应该使用target="_blank"？

Answer 3

IE 有时会忽略“空”元素，即使您定义了大小。尝试在a 标签中添加 。