CSS菜單問題與IE8 - 調試

這是一個簡單的css菜單this page.它在Chrome中正常工作。這是我正在使用的相關CSS。CSS菜單問題與IE8 - 調試

ul#list-nav { 
    clear:both; 
    list-style:none; 
    margin:0 0px; 
    padding:0; 
    width:100%; 
} 
ul#list-nav { 
    list-style:none; 
    margin:0px; 
    padding:0; 
    width:100%; 
} 
ul#list-nav li { 
    display:inline 
} 
ul#list-nav li a { 
    text-decoration:none; 
    padding:5px 0; 
    width:16.62%; 
    background:#754C78; 
    color:#eee; 
    float:left; 
    text-align:center; 
    border-left:1px solid #fff; 
}

這主要與width一個問題，而且在與右側的最後兩個單元發生的，因爲他們是稍微蘸一些奇怪的事情？

我欣賞任何建議。

謝謝

塔拉

來源

2011-08-02 Tara

第一次嘗試簡化了整個事情，因爲有更多的矛盾;像在Fx中浮動的寬度不夠;在Opera中也會出現最後兩個按鈕的碰撞;例如，爲什麼你在錨上有一個'float：left;'，而父'LI's已經有'display：inline;'，這會導致類似的效果... – feeela

該網站對我而言顯得很好所有的瀏覽器，雖然看着你的代碼我可以看到你沒有用分號關閉'display：inline'。 – tw16

@Tara無論在所有瀏覽器中看起來都不錯。問題在於代碼中的基本事物。如果將每個「菜單li」的寬度設置爲與頂部圖像中的白線相匹配的寬度，菜單的整體寬度將會過大。不多，但仍然。我可能會設置它們的高度，以便它只填充800px寬度的區域，然後設置邊欄和頂部圖像的寬度，使其與菜單相匹配。我記得你使用chrome。在Chrome中，如果你右鍵點擊任何地方，你應該看到列表中的Inspect元素使用開發人員工具來檢查元素它有很大的幫助 – Joonas

移除padding-left寬度和增加38px和padding-right

ul#list-nav li a { 
background:#754C78 none repeat scroll 0 0; 
border-left:1px solid #FFFFFF; 
color:#EEEEEE; 
float:left; 
padding:6px 38px; 
text-align:center; 
text-decoration:none; 
}

來源

2011-08-02 09:58:30

CSS菜單問題與IE8 - 調試

回答

相關問題