Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/82.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
HTML列表无意级联_Html_Css_Internet Explorer_Cross Browser - Fatal编程技术网

HTML列表无意级联

HTML列表无意级联,html,css,internet-explorer,cross-browser,Html,Css,Internet Explorer,Cross Browser,我有一个带有悬停效果的菜单,它是用无序列表、css和图像创建的。在IE9、FF v15和Chome v22中查看时,菜单显示正确。但是,在IE9的兼容模式下,或将文档模式设置为IE8标准或更低版本时,菜单无法正确显示。它有一些层叠效果,其中列表元素每个都比最后一个略低 正确的外观是: 兼容模式或文档模式IE8或以下的外观为: HTML是: <div class="Menu2"> <ul> <li&g

我有一个带有悬停效果的菜单,它是用无序列表、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>
原始菜单图像为:

为了回答这个问题,可以忽略菜单的左边缘和右边缘(位于蓝色背景上方)

你知道如何纠正列表元素的流动,使它们在其他IE版本/模式中保持水平对齐吗?

你可以尝试使用js插件修复旧浏览器的css和html

你可以尝试使用js插件修复旧浏览器的css和html

看看 2.楼梯效果

看看
2.楼梯效果

非常好,谢谢。添加.Menu2 ul li{float:left;}就是我所需要的。太好了,谢谢。添加.menu2ulli{float:left;}就是我所需要的。谢谢你的提示。如果我以后遇到任何相关问题,我会记住这一点。请参阅Derik对我所需要的解决方案的评论。如果你正在和很多不同浏览器的人建立一个公共网站,你可以考虑使用所有的样板看看或者感谢小费。如果我以后遇到任何相关问题,我会记住这一点。请参阅Derik对我需要的解决方案的评论。如果你正在为一个有很多不同浏览器的人构建一个公共站点,你可以考虑使用所有样板中的一个。
.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;
}