我通常不使用 IE7 只是因为我讨厌它,但我最新的客户使用 IE7-IE9 作为他们的默认浏览器(我知道不是很一致或最新)。所以我有一个列表,可以在所有较新的浏览器和 IE8+ 中正常显示,但在 IE7 中,UL 似乎合并到 LI 中。就像标签不存在一样,UL 是 LI 的一部分。每个列表项都嵌套在其顶部的列表项内。太可怕了。任何人都知道黑客或解决这个问题的方法吗?我的 CSS 搞砸了吗?
<div class="indentList">
<ul class="level1">
<li class="customer">
<a href="">Title</a>
</li>
<ul class="level2 level" id="level2">
<li class="site">
<a href="">Text</a>
</li>
<ul class="level3 level" id="level3">
<li class="engineer indent">
<a href="">Name</a>
</li>
</ul>
<ul class="level2 level" id="level2">
<li class="site">
<a href="">Text</a>
</li>
<ul class="level3 level" id="level3">
<li class="engineer indent">
<a href="">Name</a>
</li>
<ul class="level4 level" id="level4">
<li>
<a href="">Item</a>
</li>
<li>
<a href="">Item</a>
</li>
</ul>
</ul>
</ul>
</ul>
</div>
.indentList ul {
margin: 0px;
padding: 0px;
float: left;
}
.indentList li a {
width: 770px;
margin: 0px 0px;
padding: 10px 0px;
display: inline-block;
float: left;
}
.indentList li:hover {
background: #E9E9E9;
}
.indentList li a:hover {
text-decoration: none;
}
.indentList li .edit {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
padding: 5px 14px;
width: auto !important;
margin: 4px 0px 0px 5px;
text-align: center;
display: inline;
position: relative;
float: right;
}
.indentList li .edit.frozen {
background: #b51a1a url('images/menuBackgroundRed.png') center;
float: right;
}
.indentList li.customer {
background: #787878 url('images/menuBackgroundTaller.png') center;
color: #FFF;
box-shadow: inset 0px 0px 0px;
-moz-box-shadow: inset 0px 0px 0px;
-webkit-box-shadow: inset 0px 0px 0px;
}
.indentList li.customer a {
color: #FFF;
font-family: 'QuicksandBook', Arial, sans-serif;
font-size: 17px;
}
.level2, .level3, .level4 {
display: block;
}
.indentList ul ul ul li {
margin-left: 50px;
width: 840px;
}
.indentList ul ul ul li a {
width: 770px;
}
.indentList ul ul ul ul li {
margin-left: 90px;
width: 800px;
}
.indentList ul ul ul ul li a {
width: 730px;
}
最佳答案
不是你的 CSS,而是你的 HTML 搞砸了。
你应该这样做(伪代码):
<ul class="first-level">
<li>
<ul class="second-level">
<li>
<ul class="third-level">
<li></li>
</ul>
</li>
</ul>
</li>
</ul>
而不是这个:
<ul class="first-level">
<li></li>
<ul class="second-level">
<li></li>
<ul class="third-level">
<li></li>
</ul>
</ul>
</ul>
关于IE7 中的 HTML CSS 列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6656252/