0

だから、私は私のウェブサイト用の水平ナビゲーションバーを作成しようとしています. Chrome、Firefox、Safari でテストしましたが、問題なく動作しました。その後、友人が Internet Explorer でテストしたところ、これが発生しました。

(はい、IE ではないことはわかっていますが、彼に起こったことと 100% 同じです)

ナビゲーション バーのリンクは、縦方向のリストに押し下げられています。どうしてこれなの？\

CSS -

div#menu
{
    background-repeat: repeat-x;
    width: 100%;
    height: 50px;
    left: 0px;
    top:0px;
    position: fixed;
    z-index: 1000;
    background: url("../Images/NavBar.png");
}

div#navBar
{
    width:1000px;
    height:50px;
    position:fixed;
    zindex:1001;
    left:50%;
    margin-left: -500px;
}

ul#menuItems
{
    background:none;
    height:50px;
    width:1000px;
    margin:0;
    padding:0;
}

ul#menuItems li
{
    display:inline-block;
    list-style:none;
    margin-left:auto;
    margin-right:auto;
    top:0px;
    height:50px;
    padding-right:10px;
    min-width:65px;
}

HTML -

<div id="menu">
    <div id="navBar">
        <ul id="menuItems">
            <li>
              <a href="index.php">Home</a>
            </li>
            <li>
                <a href="index.php">DJ Profiles</a>
            </li>
            <li>
                <a href="#">Chat Room</a>
            </li>
            <li>
              <input name="searchField" type="text" value="Search Users" size="60" maxlength="150" id="SearchBox"/>
            </li>
            <li>
                <a href="#">Login to S4NR</a>
            </li>
<!--            <li id="userInfo">
                <p align="center" style="font-size:11px;">Welcome, Username.</p>
            </li>-->
        </ul>
    </div>
</div>
4

1 に答える 1

0

上記のように、インライン ブロックは古い IE で問題になる可能性がありますが、ここですべてがうまくいかないわけではありません。 .

ul#menuItems li
{
    display:inline-block;
    list-style:none;
    margin-left:auto;
    margin-right:auto;
    top:0px;
    height:50px;
    padding-right:10px;
    min-width:65px;
}

ほとんどのブラウザーは、上記の柔軟なマージンと柔軟な幅の組み合わせと競合します。ほとんどの場合、要素がナビゲーション バーの幅の 100% 近くを占めてしまいます。リスト項目の数が確実にわかっている場合は、それらに固定幅またはパーセンテージ ベースの幅を与え、余白属性を削除し、内部リンクを中心に配置text-align: center; することをお勧めします。

古い IE を修正しようとする場合は、追加します。float: left; position: relative;

于 2013-04-04T18:03:53.580 に答える