在IE6中損壞的浮動導航

Question

我的網站導航在除IE6之外的其他瀏覽器上呈現正確。

反而出現這樣的列表的問題：網站首頁|關於|服務，每出現一個新行，如：

Home 
About 
Services 
Community Pages 

，並在<li>的<a>標籤填補了整個頁面的寬度。

我沒有給<li>一個固定的寬度，因爲：導航項的長度是不同的，並且希望佔據相對於它們長度的空格。

我的HTML

<div id="nav"> 
    <ul> 
     <li class="top1space2"><a href="index.php" title="Go To Our Home Page" class="top1space3">Home</a></li> 
     <li class="top1space2"><a href="#" title="More Jobs on Ngcareers">More Jobs</a> 
      <ul> 
      <?php $count=count($c_id);for ($i=0;$i<$count;$i++){ ?> 
      <li><b><a href="category/<?php echo $c_slug[$i];?>" >&raquo; <?php echo $c_name[$i];?></a></b></li> 
      <?php } ?> 
      <li class="clearfloat">&nbsp;</li> 
      </ul> 
     </li> 
     <li class="top1space2"><a href="graduatejobs.php">Graduate Jobs</a></li> 
     <li class="top1space2"><a href="vacancy.php">Post A Job</a></li> 
     <li class="top1space2"><a href="month.php" >Jobs This Month</a></li> 
     <li class="top1space2"><a href="jobalert.php" >GSM Job Alert</a></li> 
     <li class="top1space2"><a href="employers.php" >Employers</a></li> 
     <li class="top1space2"><a href="submitcv.php"> Submit CV</a></li> 
     <li class="top1space2"><a href="subscribe.php" >Subscribe</a></li> 
     <li class="top1space2"><a href="advertise.php">Advertise</a></li> 
     <li class="top1space2"><a href="/about/contact-us">Contact</a></li> 
     </ul> 
</div> 

我的CSS：

#nav ul { 
    padding: 0px; 
    width: 1020px; 
    margin-top: 0px; 
    margin-right: auto; 
    margin-bottom: 0px; 
    margin-left: auto; 
    list-style-type: none; 
    font-family: Verdana, Geneva, sans-serif; 
    font-size: 12px; 
    height: 32px; 
} 
#nav ul li { 
    float: left; 
    display: block; 
} 
.top1space2 { 
    background-color: #086DA1; 
    background-image: url(../pics/slice1.jpg); 
    background-repeat: repeat-x; 
    display: block; 
    height: 36px; 
} 
.top1space3 { 
    color: #000; 
    font-weight: bold; 
    background-color: #F93; 
    background-image: url(../pics/slice2.jpg); 
    background-repeat: repeat-x; 
} 
#top1space3 { 
    color: #FFF; 
    font-weight: bold; 
    background-color: #111; 
    background-image: url(../pics/btnbg.jpg); 
    background-repeat: repeat-x; 
} 
#nav ul .top1space2 a { 
    color: #FFC; 
    text-decoration: none; 
    font-weight: bold; 
    font-size: 12px; 
    display: block; 
    height: 36px; 
    line-height: 36px; 
    text-align: center; 
    padding-right: 10px; 
    padding-left: 10px; 
    border-right-width: 1px; 
    border-right-style: solid; 
    border-right-color: #9CF; 
} 
#nav ul .top1space2 a:hover { 
    color: #000; 
    text-decoration: none; 
    cursor: pointer; 
    background-color: #F93; 
    background-image: url(../pics/slice2.jpg); 
    background-repeat: repeat-x; 
} 
#nav ul .top1space2:hover { 
    cursor: pointer; 
} 

請我怎麼能解決這個問題的IE6，withouth的給元素一個固定的寬度？

Answer 1

絕對是一個IE漏洞。 IE6（和IE7以及我相信）渲染浮動元素width:auto爲width:100%。

您可以對IE6/7使用此規則來修復佈局。

#nav ul li { 
    float: left; 
    display: block; 
    width:0; 
    white-space:nowrap; 
} 

，要麼使用conditional comment只適用於IE6/7或更簡單地使用一種選擇器，IE6/7不理解覆蓋到width:auto，例如：

#nav ul li { 
    float: left; 
    display: block; 
    width:0; 
    white-space:nowrap; 
} 
#nav ul > li { 
    width:auto; 
} 

Answer 2

讓貴麗元素內聯（從任何元素中移除所有浮點）並從鏈接中移除display：塊。我創建了一個jsfiddle來展示它的工作原理。有一點需要記住：通過刪除所有浮動內容並將所有內容全部內聯顯示，您將在列表中的鏈接元素之間找到間隙。有一種方法可以擺脫這種情況（我在jsfiddle中展示），但它需要從li元素之間移除任何空格，包括換行符。它使你的標記變得有點混亂，但我想這是一個你關心多少與你關心繼續支持IE6多少有關的問題。

http://jsfiddle.net/WEmv9/4/

我也清理了CSS聲明不少 - 有很多的在那裏重複的規則和不必要的標記 - 顯然這是你的選擇，但它使所應用的樣式更加清晰神交。

編輯更新的jsfiddle使「家」鏈接正確的顏色