2010-07-20 2 views
0

вкладки не отображается в IE 6, работает нормально, в другихвкладка не отображается в 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> 

ответ

2

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

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

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

Смежные вопросы