2010-07-20 4 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은 > 선택기를 전혀 지원하지 않습니다.

둘째로 ali 왼쪽으로 부칠 이유가 없습니다. a에 여백과 여백을 넣을 수 있으려면 display: inline-block이되어야합니다.

변경하고 다른 불필요한 규칙 (예 : a에 필요하지 않은 position)을 제거하고 도움이되는지 확인하십시오.