为什么我的图片不能在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 ＆amp; 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。