Question

我正在尝试使用无序列表和CSS设置选项卡列表。这在IE7，Chrome，FF中看起来很好，但在IE6中却没有。在IE6中，它在选项卡和内容窗格之间有差距，我很难找到原因。

HTML

<ul class="ptl_tablist">
  <li><a href="#">Tab One</a></li>
  <li><a href="#">Tab Two</a></li>
  <li class="selected"><a href="#">Tab Three</a></li>
  <li><a href="#">Tab Four</a></li>
</ul>

<div class="ptl_tabcontent">
Content here: <input type="text" />
</div>

CSS

body { font-family: arial; font-size: 10pt; }

/* Remove bullets */
.ptl_tablist { list-style: none; margin: 0; padding: 0; }

/* Grey border around inactive tabs */
.ptl_tablist li { border: solid 1px #BBB; border-bottom-width: 0; float: left; margin: 0; }

/* Block anchors, grey background, wide padding */
.ptl_tablist li a {
    background: none repeat scroll 0 0 #EEE;
    padding: 2px 15px;
    display: block;
    text-align: center;
    display: block;
    text-decoration: none;
}

/* Black border around selected tab */
.ptl_tablist li.selected { border-color: #000; }

/* Selected anchor */
.ptl_tablist li.selected a {
    background: none repeat scroll 0 0 #FFF;
    font-weight: 700;
    position: relative;
    top: 1px;
}

/* Yellow background for hovering over inactive tabs */
.ptl_tablist li a:hover { background: none repeat scroll 0 0 #FFFF70; }

/* White background for hovering over active tab */
.ptl_tablist li.selected a:hover { background: none repeat scroll 0 0 #FFF; }

/* Content under tabs. Clear floating tabs. Pad and border. */
.ptl_tabcontent { border: solid 1px #000; padding: 10px 3px 3px 3px; clear: both; }

jsFiddle http://jsfiddle.net/s7yZw/1/

Answer 1

将标签（LI）向左浮动，A也浮动。然后在UL上使用clearfix。

Answer 2

交换clear：两者都在.pt1_tabcontent上进行缩放：1;

.ptl_tabcontent { border: solid 1px #000; padding: 10px 3px 3px 3px; zoom:1; }

为什么我在IE6中的选项卡列表和内容窗格之间有差距？

2 个答案: