水平列表項寬度在Firefox和鉻

不同

<div id="menu"> 
    <ul> 
     <li class="menu_item"> 
      <a href="#"> 
       Item1 
      </a> 
     </li> 
     <li class="menu_item"> 
      <a href="#"> 
       Item2 
      </a> 
     </li> 
     <li class="menu_item"> 
      <a href="#"> 
       Item3 
      </a> 
     </li> 
     <li class="menu_item"> 
      <a href="#"> 
       Item4 
      </a> 
     </li> 
     <li class="menu_item"> 
      <a href="#"> 
       Item5 
      </a> 
     </li> 
    </ul> 
</div>

風格與下面的CSS：

#menu { 
    position: relative; 
    width: 715px; 
    height: 40px; 
} 

#menu > ul { 
    display: block; 
    border-top: 1px solid black; 
    border-bottom: 1px solid black; 
    border-left: 1px solid black; 
    width: 100%; 
    height: 100%; 
} 

#menu > ul > li { 
    display: table; 
    height: 100%; 
    text-align: center; 
    float: left; 
    border-right: 1px solid black; 
    width: 142px !important; 
}

火狐正確顯示它;不過，在Chrome中，所有項目的寬度都是141px，而不是142.我不能只將數字增加1，因爲那樣Firefox在Firefox中就太寬了，不適合放在一行中。

我該怎麼辦？請幫忙。

編輯：截圖：
鉻列表：img694.imageshack.us/img694/5088/chromelist.png
火狐列表：img840.imageshack.us/img840/8689/firefoxlist.png

編輯2：如果我刪除從 'UL' 邊框的頂部和漢字，並加入到 '禮'那麼在Chrome中它不再是141像素，而是143像素。我不知道如何改變垂直邊界可能會影響寬度...

來源

2012-01-16 mgol

你可以隨時根據瀏覽器改變你的寬度：http://www.quirksmode.org/js/detect.html它很冗長，但它對查找用戶信息非常有用。無論如何，我喜歡它。 – nmagerko 2012-01-16 21:38:55

截圖：鉻列表： http://img694.imageshack.us/img694/5088/chromelist.png 火狐列表： http://img840.imageshack.us/img840/8689/firefoxlist.png – mgol 2012-01-16 21:41:53

@nmagerko我知道，但我想要一個標準的解決方案在這裏;如果我在這種簡單的情況下創建用戶代理嗅探代碼，那麼更復雜的代碼將是一個真正的混亂... – mgol 2012-01-16 21:48:52

如果您刪除display: table;他們應該採取相同的行爲。

很多人需要添加list-style-type:none和一些填充以對齊文本。

來源

2012-01-16 22:11:12

那我怎麼能實現垂直對齊？ – mgol 2012-01-16 22:30:52

也許給UL說高度增加一個固定的高度：50px;然後在li上添加padding-top：15px;和高度：35px; – 2012-01-16 22:36:19

它創造了大量的冗餘信息......如果我想改變列表高度，那麼我需要修改一些東西，而不是一個。難道沒有更優雅的解決方案嗎？... – mgol 2012-01-16 23:40:27

水平列表項寬度在Firefox和鉻

回答

相關問題