选项卡未在IE 6中显示

时间:2010-07-20 09:10:52

标签: html css xhtml internet-explorer-6 tabs

标签未在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>

1 个答案:

答案 0 :(得分:2)

首先,IE6根本不支持>选择器。

其次,没有理由让a里面的li浮动到左边。为了能够在a上添加填充和边距,使其成为display: inline-block

尝试更改并删除其他不必要的规则(例如positiona上也不需要),看看是否有帮助。