0

希望有人可以帮助我解决我在 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？谢谢！！

4

3 回答 3

1

尝试添加显示：块

#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;
}
于 2012-07-27T18:55:44.927 回答
0

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

于 2012-07-27T18:46:51.473 回答
0

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

于 2012-07-27T18:58:52.477 回答