水平菜單 - IE中的差距

我正在研究一個940像素寬的小型個人網站。我想建立一個包含6個網站全部寬度的菜單。我設法使菜單在Firefox，Chrome和Opera中完美無瑕，但在IE中，我在最後一個元素的末尾留下了一點（4-5px）的空白。任何想法我怎麼能刪除這個空間？水平菜單 - IE中的差距

下面是菜單CSS：

#menu ul { 
    list-style: none; 
    width: 100%; 
} 

#menu li { 
    display: inline-block; 
    *display: inline; 
    text-align: center; 
    padding: 30px 0 30px 0; 
} 

#menu a { 
    text-decoration: none; 
    font-size: 16px; 
    border-right: 1px solid #C1BEBA; 
    padding: 10px 56px 10px 56px; 
}

和HTML

<ul id="menu"> 
    <li><a href="#">Menu 1</a></li> 
    <li><a href="#">Menu 2</a></li> 
    <li><a href="#">Menu 3</a></li> 
    <li><a href="#">Menu 4</a></li> 
    <li><a href="#">Menu 5</a></li> 
    <li><a href="#">Menu 6</a></li> 
</ul>

LIVE DEMO

來源

2012-11-10 user1814514

HTML行3：更改'

Menu 2

'和'

Menu 2

'，' 「＃」「'是錯誤。 –

沒有錯誤:) – user1814514

有幾個與你的代碼，你的計劃的問題。

你真的需要決定：你想要菜單項之間有任何空格。如果你不這樣做，並且你希望它們相互接觸，並觸摸940px寬頁面的邊，那麼你的當前計劃將不起作用，因爲940/6 = 156.666會重複出現。這不是像素完美，看起來很糟糕。如果你想要菜單項之間的空間，那麼你需要爲所有的菜單項設置一個寬度。如果您只是使用填充，那麼當您放入太多或太少的文本時，頁面佈局將會中斷，否則將會不均勻，除非您使用更多CSS。
您的代碼有錯誤，有些地方像#menu ul。它應該是ul＃菜單。這就是爲什麼你的一些代碼不工作。
如果您希望它看起來與其他瀏覽器中的相同，則需要對IE使用CSS重置。我在下面的代碼中使用了一個簡單的重置，但我建議您使用Google IE CSS Resets併爲您選擇最合適的一個。
這是我放在一起的示例代碼。我已經改變了你的一些，但希望它會有所幫助。我爲li標籤添加了一個右邊距，然後爲a標籤添加了一個負邊距，以確保文本在邊框之間很好地居中。如果你希望菜單項具有不同的背景顏色，這將會改變，你只需要用你的CSS寬度和邊距來做數學運算。

你可以看到這段代碼的完整的例子： http://code.bengrunfeld.com/iewithhorizontalmenu.html

html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, 
del, dfn, em, font, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, 
dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    outline: 0; 
    font-weight: inherit; 
    font-style: inherit; 
    font-size: 100%; 
    font-family: inherit; 
    vertical-align: baseline; 
} 

body { 
    background:#aaa; 
    width:940px; 
} 

ul#menu { 
    background:#fff; 
    list-style: none; 
    width:940px; 
    height:80px;  
} 

#menu li { 
    width:145px; 
    display:inline-block;  
    padding: 30px 0; 
    margin-right:13px; 
    float:left; 
    border-right: 1px solid #C1BEBA; 
} 

#last { 
    margin-right:0px !important; 
    border-right:none !important; 
} 

#menu a { 
    width:158px; 
    text-decoration: none; 
    font-size: 16px; 
    text-align:center; 
    margin-left:-13px; 
    display:block; 
} 

<ul id="menu"> 
    <li><a href="#">Menu 1</a></li> 
    <li><a href="#">Menu 2</a></li> 
    <li><a href="#">Menu 3</a></li> 
    <li><a href="#">Menu 4</a></li> 
    <li><a href="#">Menu 5</a></li> 
    <li id="last"><a href="#">Menu 6</a></li> 
</ul>

來源

2012-11-11 04:21:02 Ben

水平菜單 - IE中的差距

回答

相關問題