标签未在IE 6中显示,但在其他浏览器中工作正常
http://jsbin.com/ehege/2
怎么解决?
<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根本不支持>
选择器。
其次,没有理由使a
内部的li
浮动到左侧。为了能够在a
上添加填充和边距,请将其设置为display: inline-block
。
尝试更改它并删除其他不必要的规则(例如position
,在a
上也不需要),然后查看是否有帮助。