html - 水平菜单 - IE 中的空白

Question

我正在开发一个 940 像素宽的小型个人网站。我想构建一个包含 6 个元素的菜单，该菜单是整个网站的宽度。我设法使菜单在 Firefox、Chrome 和 Opera 中完美无缺，但在 IE 中，我在最后一个元素的末尾有一点(4-5 像素)的差距。有什么想法可以删除该空间吗？

这是菜单的 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. 您确实需要决定:是否要在菜单项之间留出空间。如果你不这样做，并且你希望它们相互接触，并接触 940px 宽页面的两侧，那么你当前的计划将不起作用，因为 940/6=156.666 会重复出现。这不是像素完美的，看起来会很糟糕。如果您希望菜单项之间有空间，则需要为所有菜单项设置宽度。如果您只使用填充，那么当您输入过多或过少的文本时，页面布局就会中断，或者会不均匀，除非您使用更多的 CSS。

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

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

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>