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

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

サイズを定義しても、IEは「空の」要素を無視することがあります。タグを追加&nbsp;してみてください。a

于 2012-07-27T18:58:52.477 に答える
0

rel="_blank" を使用していますか? それはHTML5ですか？使用しているIEのバージョンは9ですか？target="_blank" を使用する必要があるのでしょうか。

于 2012-07-27T18:46:51.473 に答える