4

こんにちは – 何らかの理由で、私のサイトの 2 つのメニュー項目が ie8 で重複しています (下のスクリーンショットを参照してください – 「about us」と「press」の項目と、これら 2 つの項目の間のスペースの背景が白です) http://goo.gl /34oQ8 - 理由はありますか?

ここに画像の説明を入力

CSSコード

#nav
{
        right:2%;
        list-style:none;
        position:fixed;
        /* float:right; */
        top:30px;
        z-index:1000;
        /* width:520px; */
}

#nav > li {
    display: inline-block;
    /* dirty hack for IE7 */
    *display: inline;
    *zoom: 1;
}

#nav a
{
        font:12px 'Open Sans', "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
        font-weight:600;
        letter-spacing:1px;
        float:left;
        top:30px;
        display:inline-block;
        font-size:11px;
        margin-left:5px;
        margin-right:5px;
        padding-left:15px;
        padding-right:15px;
        text-decoration:none;
        height:24px;
        color:#666;
        line-height:24px;
        text-align:center;
        box-shadow:1px 1px 2px rgba(0,0,0,0.2);
        /* background:rgba(255,255,255,0.9);  removed not ie8 compatible */
        text-transform:uppercase;
        background: white;
    opacity: 0.8;
    filter: Alpha(opacity='80');
}

#nav a:hover
{
        background:#dedede;
}

#nav .current a
{
        background:#666;
        color:#ededed;
}

HTMLコード

    <ul id="nav">
  <li class="current"><a href="#presentation">Home</a></li>
  <li><a href="#equipe">Team</a></li>
  <li><a href="#plan-activite">About us</a></li>
  <li><a href="#medias">Press</a></li>
  <li><a href="#inline" class="modalbox">Contact</a></li>
</ul>
4

2 に答える 2

3

<a>要素にマージンを設定しても、必要なスペースが空くとは思い<li>ません。nav li代わりにmargin-left および/または margin-right を追加してみてください

また、HTML5 には、<nav>id="nav" を適切に置き換えるタグが含まれています。

于 2012-08-02T17:58:25.283 に答える
0

すべてのスペーシングとパディング要素を #nav > li に移動する必要があります。

#nav a のコードは、そのリンク項目のスタイル設定のみを目的とする必要がありますが、LI はメニュー項目自体のスタイル設定に使用できます。

#nav > li {
            display: inline-block;
            margin: 0 5px;
            padding: 3px 15px;
}

これにより、コードのクリーニングが少し始まります..

于 2012-08-02T18:40:54.487 に答える