1

これについてはたくさんの質問があることは知っていますが、どの答えも私の問題を解決していないようです。

すべてのアイテムがオーバーギャップしているわけではなく、右に押しすぎているアイテムは1つだけです。私は何百万回も持っているものを調べましたが、IE8とIE7でのみ問題が発生しています。この余分なギャップは、IE9および他のすべてのブラウザーには存在しません。

これがギャップです

私のCSS:

    #navigation{
        background: url("../images/nav.png") repeat-x;
        height: 88px;
        width: 1000px;
        margin: 0 auto;
    }
    #navigation .menu{
        padding: 5px 0px 0px 155px;
    }
    #navigation .menu ul{
        display: inline;
    }
    #navigation .menu ul li{
        list-style: none;
        float: left;
        padding: 0px 0px 0px 25px;
    }
    #navigation .menu a.home{
    display: block;
    background-image: url("../images/b_home.png");
    background-repeat: no-repeat;
    height: 74px;
    width: 74px;
    }
    #navigation .menu a.home:hover,#navigation .menu a.home.current{
    background-image: url("../images/h_home.png");
    background-repeat: no-repeat;
    height: 74px;
    width: 74px;
    }
    #navigation .menu a.content{
    display: block;
    background-image: url("../images/b_content.png");
    background-repeat: no-repeat;
    height: 74px;
    width: 74px;
    }
    #navigation .menu a.content:hover,#navigation .menu a.content.current{
    background-image: url("../images/h_content.png");
    background-repeat: no-repeat;
    height: 74px;
    width: 74px;
    }
    #navigation .menu a.report{
    display: block;
    background-image: url("../images/b_report.png");
    background-repeat: no-repeat;
    height: 74px;
    width: 74px;
    }
    #navigation .menu a.report:hover,#navigation .menu a.report.current{
    background-image: url("../images/h_report.png");
    background-repeat: no-repeat;
    height: 74px;
    width: 74px;
    }
    #navigation .menu a.users{
    display: block;
    background-image: url("../images/b_users.png");
    background-repeat: no-repeat;
    height: 74px;
    width: 74px;
    }
    #navigation .menu a.users:hover,#navigation .menu a.users.current{
    background-image: url("../images/h_users.png");
    background-repeat: no-repeat;
    height: 74px;
    width: 74px;
    }
    #navigation .menu a.media{
    display: block;
    background-image: url("../images/b_media.png");
    background-repeat: no-repeat;
    height: 74px;
    width: 74px;
    }
    #navigation .menu a.media:hover,#navigation a.menu .media.current{
    background-image: url("../images/h_media.png");
    background-repeat: no-repeat;
    height: 74px;
    width: 74px;
    }
    #navigation .menu a.event{
    display: block;
    background-image: url("../images/b_events.png");
    background-repeat: no-repeat;
    height: 74px;
    width: 74px;
    }
    #navigation .menu a.event:hover,#navigation .menu a.event.current{
    background-image: url("../images/h_event.png");
    background-repeat: no-repeat;
    height: 74px;
    width: 74px;
    }
    #navigation .menu a.news{
    display: block;
    background-image: url("../images/b_news.png");
    background-repeat: no-repeat;
    height: 74px;
    width: 74px;
    }
    #navigation .menu a.news:hover,#navigation .menu a.news.current{
    background-image: url("../images/h_news.png");
    background-repeat: no-repeat;
    height: 74px;
    width: 74px;
    }
    #navigation .menu a.settings{
    display: block;
    background-image: url("../images/b_settings.png");
    background-repeat: no-repeat;
    height: 74px;
    width: 74px;
    }
    #navigation .menu a.settings:hover,#navigation .menu a.settings.current{
    background-image: url("../images/h_settings.png");
    background-repeat: no-repeat;
    height: 74px;
    width: 74px;
    }

私のHTML:

<div id="navigation">
    <div class="menu">
    <ul>
    <li><a rel="tooltip" class="home current" href="#" title="Home"></a></li>
    <li><a rel="tooltip" class="content" href="#" title="Content"></a></li>
    <li><a rel="tooltip" class="report" href="#" title="Reports"></a></li>
    <li><a rel="tooltip" class="users" href="#" title="Users"></a></li>
    <li><a rel="tooltip" class="media" href="#" title="Media"></a></li>
    <li><a rel="tooltip" class="events" href="#" title="Events"></a></li>
    <li><a rel="tooltip" class="news" href="#" title="News"></a></li>
    <li><a rel="tooltip" class="settings" href="#" title="Settings"></a></li>
    </ul>
    </div>
</div>

正しい方向へのポイントは素晴らしいでしょう!

4

1 に答える 1

1

<li><a class="event">私が置いたHTMLでエラーが発生した"events"ようですので、sを削除する必要がありました。エラーが表示されたのは、IE7だけでした。

IEは嫌いですが、今日は助けになりました。ありがとうございます。

于 2012-07-20T15:37:54.083 に答える