gpt4 book ai didi

HTML 列表无意中级联

转载 作者:行者123 更新时间:2023-11-28 18:36:10 26 4
gpt4 key购买 nike

我有一个带有悬停效果的菜单,该菜单是使用无序列表、CSS 和图像创建的。在 IE9、FF v15 和 Chome v22 中查看时菜单显示正确。但是,在 IE9 的兼容模式下,或者将文档模式设置为 IE8 标准或更低版本时,菜单无法正确显示。它具有一些级联效果,其中每个列表元素都比最后一个略低。

正确的样子是: enter image description here

IE8及以下兼容模式或文档模式下的外观为: enter image description here

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;
}

原始菜单图像是: enter image description here

为了这个问题,可以忽略菜单的左右边缘(存在于蓝色背景之上)。

关于如何更正列表元素的流向以便它们在其他 IE 版本/模式中保持水平对齐有什么想法吗?

最佳答案

关于HTML 列表无意中级联,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12649235/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com