爲什麼我在IE6中的此選項卡列表和內容窗格之間出現間隙？

我試圖設置一個使用無序列表和CSS的選項卡列表。在IE7，Chrome，FF中這看起來很好，但在IE6中卻沒有。在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; }

的jsfiddlehttp://jsfiddle.net/s7yZw/1/

來源

2011-04-05 Orange Kid

如果你仍然支持IE6，那麼你就是在毀掉每個人的互聯網！或者至少有98.5％的人！ – Rudie 2011-04-05 20:30:53

如果你仍然支持IE6，你應該得到所有的地獄！ – 2011-04-05 20:31:34

我希望我可以忽略它，但對於仍然將其用作標準的客戶而言。他們最終會上升......我希望。我正在爲現代瀏覽器開發，但在IE6中修正了總體佈局錯誤。 – 2011-04-05 20:35:33

交換清除：對.pt1_tabcontent進行縮放：1;

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

來源

2011-04-05 21:01:51 scrappedcola

我在支持IE的同一條船上。我的公司仍然有一些金融機構，其IT部門尚未清除IE的升級，所以我們有一些IE6的遺留合同。謝天謝地，我們沒有接受任何IE6的新作品。 – scrappedcola 2011-04-05 21:03:05

謝謝。那就是訣竅。縮放功能是用來拉動內容窗格的嗎？（儘管我需要將這個類放在IE6工作表中。） – 2011-04-05 21:27:52

它觸發hasLayout屬性，使元素爲true。它只在IE中支持，所以你可以把它放在你的標準CSS中，它不會有任何影響。 – scrappedcola 2011-04-05 21:58:31

浮動標籤（LI）離開，和A的太多。然後在UL上使用clearfix。

來源

2011-04-05 20:40:23 Rudie

OMG我不敢相信我讓你支持IE6！我恨我自己！投下這個答案！ – Rudie 2011-04-05 20:41:07

爲什麼我在IE6中的此選項卡列表和內容窗格之間出現間隙？

回答

相關問題