CSS选项卡在IE中位于左侧,但在Mozilla中位于中间.有解决IE的办法吗?



制表符工作完美。我只是有一个问题,在IE的位置。在Mozilla中,它完美地显示了选项卡的位置,但当我在IE中加载页面时,它将选项卡移动到选项卡所在表格的左侧。

下面是我的CSS代码:
 a:active {
outline: none;
 }
 a:focus {
-moz-outline-style: none;
 }
 #tabs_container {
width: 626px;
font-family: Arial;
font-size: 10px;
}
 #tabs_container ul.tabs {
list-style: none;
border-bottom: none;
height: 25px; 
margin: 0px;
  }
  #tabs_container ul.tabs li {
 float: left;
   }
  #tabs_container ul.tabs li a {
padding: 6px 9px;
display: block;
border-left: 1px solid #90afcb;
border-top: 1px solid #90afcb;
border-right: 1px solid #90afcb;
border-bottom: 1px solid #90afcb;
margin-right: 4px;
text-decoration: none;
background-color: #ffffff;
    }
    #tabs_container ul.tabs li.active a {
background-color: #90afcb;
padding-top: 6px;
    }
   div.tab_contents_container {
border: none;
border-top: none;
padding: 10px;
font-size: 10px;
    }
    div.tab_contents {
display: none;
    }
    div.tab_contents_active {
display: block;
    }
    div.clear {
clear: both;
    }
HTML

  <!-- These are the tabs -->
  <ul class="tabs">
    <li class="active">
      <a href="#" rel="#tab_1_contents" class="tab"><span>Dienstleistung | Services</span></a>
    </li>
    <li><a href="#" rel="#tab_2_contents" class="tab"><span>Über uns | About us</span></a></li>
    <li><a href="#" rel="#tab_3_contents" class="tab"><span>Netzwerken | Networking</span></a></li>
    <li><a href="#" rel="#tab_4_contents" class="tab"><span>Social Media</span></a></li>
    <li><a href="#" rel="#tab_5_contents" class="tab"><span>Impressum</span></a></li>
  </ul>
如果你能提供任何帮助,我将非常感激。非常感谢

您是否尝试添加float, #tabs_container ul.tabs#tabs_container ul.tabs li a

#tabs_container ul.tabs {
     float:left;
    border:1px solid red;
list-style: none;
border-bottom: none;
height: 25px; 
margin: 0px;
  }
  #tabs_container ul.tabs li a {
float:left;
padding: 6px 9px;
display: block;
border-left: 1px solid #90afcb;
border-top: 1px solid #90afcb;
border-right: 1px solid #90afcb;
border-bottom: 1px solid #90afcb;
margin-right: 4px;
text-decoration: none;
background-color: #ffffff;
    }

相关内容

最新更新