2

我正在开发一个 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>

现场演示

4

1 回答 1

0

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

  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/iewithhorizo​​ntalmenu.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-11T04:21:02.273 回答