HTML列表无意中级联

Question

我有一个菜单，其中包含使用无序列表，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版本/模式中保持水平对齐？

Answer 1

看一看 http://net.tutsplus.com/tutorials/html-css-techniques/9-most-common-ie-bugs-and-how-to-fix-them/ 2.楼梯效应

Answer 2

您可以尝试modernizer js插件来修复旧浏览器的css和html