順序付けられていないリスト、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 バージョン/モードで水平方向に整列する方法はありますか?