如何從額外的空間，擺脫對

我創建了簡單的橫向菜單，並給每個LI內享有平等的權利和左填充，但在IE版本中，它是最後李後留下多餘的空間或灌進旁邊的菜單右側線。如何從額外的空間，擺脫對

我花3個小時，使其跨瀏覽器兼容，但失敗而告終。當我把最後的LI上的額外填充調整空間時，它在Firefox中很好，但在ie中顯示不需要的空間。我想讓它跨瀏覽器兼容，而不使用黑客。

enter image description here

下面

是代碼：

<section class="topContent"> 
    <nav> 
     <ul> 
      <li><a href="javascript:;">home</a> 
      </li> 
      <li><a href="javascript:;">earthmoving</a> 
      </li> 
      <li><a href="javascript:;">attachments</a> 
      </li> 
      <li><a href="javascript:;">power systems</a> 
      </li> 
      <li><a href="javascript:;">truck tailer</a> 
      </li> 
      <li><a href="javascript:;">ag equipment</a> 
      </li> 
     </ul> 
    </nav> 
    <!--/nav--> 
</section>

.topContent{ width:940px; margin:0 auto;} 
.topContent nav{ background:#ffce12; height:42px;} 
.topContent nav ul{ padding:0; margin:0;} 
.topContent nav li{ float:left; list-style:none;} 
.topContent nav li a{ font:14px/42px Arial, Helvetica, sans-serif; color:#000; padding:0 40px; text-transform:capitalize; display:block;} 
.topContent nav li a:hover, .topContent nav li a.active{ background:#464646 url(../images/hover-arrow.jpg) no-repeat center 0; display:block; color:#fff;}

來源

2012-11-04 Praveen

您有幾個代碼的問題。首先通過W3C驗證程序運行它，更正它們，然後再回來。 – j08691

使用瀏覽器調試工具，即：螢火蟲在Firefox和其他瀏覽器相似（通常F12默認鍵），你可以在元素上點擊並研究它的風格和它的CSS的一部分做了什麼。這通常可以幫助您快速確定爲何您擁有不需要空間的空間，或者需要更改哪些空間以在需要的地方添加空間。調試器工具甚至可以直接更改樣式以檢查即時結果。 – Nope

相信這是一個字母間距問題，因爲不同的瀏覽器呈現不同的字母間距，即使我已經玩過字母間距，但它的功能工作 – Praveen

你的「設計公司」 CSS不出來的物品對齊/空間可言，你剛剛調整的填充值，使它在一個瀏覽器上工作。

一個解決這個問題的辦法是to justify the nav items，或者如果你不感興趣的動態內容（即資產淨值項冠軍不會很長一段時間而改變），你可以只設置elemenent寬度明確和中心自己的文字。

來源

2012-11-04 22:55:17

的問題是基於菜單的寬度。我相信，因爲文本在每個瀏覽器和操作系統中都略有不同，所以您不會得到完美的結果。如果菜單不是動態的，你可以嘗試分別調整寬度/填充。或者，您可以將菜單寬度的寬度除以鏈接的數量。如果某些項目太長，可能會顯得有點奇怪。如果你這樣做，確保你對齊中心的文字。

nav a { 
    padding: 0; /*just need to remove the padding*/ 
    width: 156.6px; /*940/7 (the amount of links)*/ 
    text-align:center; 
}

來源

2012-11-04 23:13:26 lukek

如何從額外的空間，擺脫對

回答

相關問題