选项卡在 IE 6 中不显示，在其他浏览器中工作正常
如何解决？
<style type="text/css">
*
{
margin:0;
padding:0;
}
li
{
list-style:none;
}
a
{
text-decoration:none;
font-size:14px;
}
#tabcontainer
{
height:62px;
position:relative;
margin: 2em;
font-size: 12px;
}
#tabitemscontainer1 > li > a
{
-moz-border-radius: 7px 7px 0 0;
background: #F3F8C6;
float: left;
margin-right: 2px;
padding: 5px 10px;
border: 1px solid #EABF4A;
/* Added this */
position: relative;
top: 0;
/* end */
}
#tabcontainer ul li li.selected a,#tabitemscontainer1 > li.selected > a
{
color:#AE4329;
font-weight:700;
}
#tabitemscontainer1 > li.selected
{
border-bottom: 1px solid #F3F8C6;
}
#tabitemscontainer1 > li.selected > a
{
/* Added this */
position: relative;
top: 0px;
z-index: 1;
border-bottom: 0px;
/* end */
}
ul.level2
{
background: #F3F8C6;
border:1px solid #EABF4A;
left:0;
position:absolute;
top:28px;
width:463px;
padding:6px;
z-index: 0;
}
#tabcontainer ul li {float:left}
#tabcontainer ul li li
{
float:left;
padding:0 15px 0 4px;
}
</style>
</head>
<body>
<div class="tabcontainer" id="tabcontainer">
<ul id="tabitemscontainer1">
<li class="selected" >
<a href="#">item 1</a>
<ul class="level2">
<li><a href="#">sub item 1</a></li>
<li><a href="#">subitem 2</a></li>
</ul>
</li>
<li><a href="#">item2</a></li>
</ul>
</div>
最佳答案
首先，IE6 根本不支持> 选择器。
其次，没有理由让li里面的a向左浮动。为了能够在 a 上放置填充和边距，使其成为 display: inline-block。
尝试更改它并删除其他不必要的规则(例如 position，它在 a 上也不需要)，看看是否有帮助。
关于html - 选项卡未在 IE 6 中显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3288482/