вкладка не отображается в IE 6 - PullRequest
Новая
       27

вкладка не отображается в IE 6

0 голосов
/ 20 июля 2010

вкладка не отображается в 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 Ответ

2 голосов
/ 20 июля 2010

Прежде всего, IE6 вообще не поддерживает селектор >.

Во-вторых, нет никакой причины, чтобы a внутри li плавал влево. Чтобы иметь возможность поместить отступы и поля на a, сделайте его display: inline-block.

Попробуйте изменить это и удалите другие ненужные правила (такие как position, которые также не нужны в a) и посмотрите, поможет ли это.

...