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

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

您真的需要决定：您是否希望菜单项之间有空格。如果你不这样做，并且你希望它们相互接触，并且触摸940px宽页面的两侧，那么你当前的计划将不起作用，因为940/6 = 156.666重复出现。这不是像素完美，看起来很糟糕。如果您想在菜单项之间留出空格，则需要为所有菜单项设置宽度。如果你只是使用填充，那么当你输入太多或太少的文本时，页面布局就会破裂，或者除非你使用更多的CSS，否则页面布局会不均匀。
您的代码在某些地方有错误，例如#menu ul。它应该是ul＃menu。这就是为什么你的一些代码无效。
如果您希望IE看起来与其他浏览器中的相同，则需要对IE使用CSS重置。我在下面的代码中使用了一个简单的重置，但我建议您使用Google IE CSS重置并为您选择最适合的。
以下是我放在一起的示例代码。我已经改变了你的一些，但希望它会有所帮助。我为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>

水平菜单 - IE中的差距

1 个答案: