HTML 列表无意级联答案

【问题标题】：HTML list unintentionally cascadingHTML 列表无意级联
【发布时间】：2012-09-29 10:06:32
【问题描述】：

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

【问题讨论】：

标签： html css internet-explorer cross-browser

【解决方案1】：

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

【讨论】：

完美，谢谢。添加 .Menu2 ul li { float:left; } 是我所需要的。

【解决方案2】：

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

【讨论】：

感谢您的提示。如果我将来遇到任何相关问题，我会记住这一点。请参阅我在 Derik 的回答下的评论，了解我需要的修复。
如果您正在构建一个供拥有许多不同浏览器的人使用的公共网站，您可以考虑使用所有样板之一，查看html5boilerplate 或initializr