1

順序付けられていないリスト、css、および画像で作成されたホバーオーバー効果のあるメニューがあります。IE9、FF v15、および Chome v22 で表示すると、メニューが正しく表示されます。ただし、IE9 の互換モード、またはドキュメントモードを IE8 標準以下に設定すると、メニューが正しく表示されません。リスト要素がそれぞれ最後の要素よりもわずかに低く表示されるカスケード効果があります。

正しい外観は次のとおりです。 ここに画像の説明を入力

互換モードまたはドキュメントモード IE8 以下での外観は次のとおりです。 ここに画像の説明を入力

HTML は次のとおりです。

<div class="Menu2">
          <ul>
            <li><a href="index.php" class="MenuHome">Home</a></li>
            <li><a href="coolRooms.php" class="MenuCoolRooms">CoolRooms</a></li>
            <li><a href="onlineBooking.php" class="MenuOnlineBookings">OnlineBookings</a></li>
            <li><a href="termsAndConditions.php" class="MenuTermsAndConditions">Terms&Conditions</a></li>
            <li><a href="madigansMilk.php" class="MenuMadigansMilk">Madigan'sMilk</a></li>
          </ul>
      </div>

CSS は次のとおりです。

.Menu2 {
    z-index:100px;
}
.Menu2 ul {
    width:850px;
    padding:0;
    margin:0;
    /*margin-left:98px;*/
    list-style-type:none;
}
.Menu2 li a {
    display: block;
    float: left;
    height:65px;
    background-image: url(../images/Menu.png);
    text-indent:-9999px;
}
.MenuHome {
    width:99px;
    background-position:0 0;
}
.MenuCoolRooms {
    width:149px;
    background-position:-99px 0;
}
.MenuOnlineBookings {
    width:195px;
    background-position:-249px 0;
}
.MenuTermsAndConditions {
    width:221px;
    background-position:-444px 0;
}
.MenuMadigansMilk {
    width:186px;
    background-position:-665px 0;
}
.MenuHome:hover {
    background-position:0 -65px;
}
.MenuCoolRooms:hover {
    background-position:-99px -65px;
}
.MenuOnlineBookings:hover {
    background-position:-249px -65px;
}
.MenuTermsAndConditions:hover {
    background-position:-444px -65px;
}
.MenuMadigansMilk:hover {
    background-position:-665px -65px;
}

生のメニュー画像は次のとおりです。 ここに画像の説明を入力

メニューの左端と右端 (青色の背景の上にある) は、この質問のために無視できます。

リスト要素の流れを修正して、他の IE バージョン/モードで水平方向に整列する方法はありますか?

4

2 に答える 2

1

http://net.tutsplus.com/tutorials/html-css-techniques/9-most-common-ie-bugs-and-how-to-fix-them/をご覧ください 。

于 2012-09-29T02:06:32.470 に答える
0

古いブラウザの css と html を修正するためのmodernizer js プラグインを試すことができます

于 2012-09-29T01:50:11.403 に答える