水平菜单 - IE 中的空白

Question

我正在开发一个 940 像素宽的小型个人网站。我想建立一个包含 6 个元素的菜单，该菜单是网站的全宽。我已经设法使 Firefox、Chrome 和 Opera 中的菜单完美，但在 IE 中，我在最后一个元素的末尾有一点（4-5px）间隙。有什么想法可以删除那个空间吗？

这里是菜单的 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

Answer 1

您的代码和计划存在一些问题。

1. 您确实需要决定：您是否希望在菜单项之间留出任何空间。 如果您不这样做，并且您希望它们相互接触，并接触 940 像素宽页面的两侧，那么您当前的计划将无法正常工作，因为 940/6=156.666 会重复出现。这不是像素完美的，看起来很糟糕。 如果您想要菜单项之间的空间，那么您需要为所有菜单项设置宽度。如果你只使用 padding，那么当你输入太多或太少的文本时，页面布局就会中断，或者会不均匀，除非你使用更多的 CSS。

2. 您的代码在某些地方有错误，例如#menu ul。它应该是 ul#menu。这就是您的某些代码无法正常工作的原因。

3. 如果您想让 IE 看​​起来与其他浏览器中的一样，您需要使用 CSS 重置。我在下面的代码中使用了简单的重置，但我建议您使用 Google IE CSS 重置并选择最适合您的重置。

4. 这是我整理的示例代码。我已经改变了你的很多，但希望它会有所帮助。我为 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>