css - Firefox 和 Chrome 中的水平列表项宽度不同

Question

我有以下 HTML 水平列表:

<div id="menu">
    <ul>
        <li class="menu_item">
            <a href="#">
                Item1
            </a>
        </li>
        <li class="menu_item">
            <a href="#">
                Item2
            </a>
        </li>
        <li class="menu_item">
            <a href="#">
                Item3
            </a>
        </li>
        <li class="menu_item">
            <a href="#">
                Item4
            </a>
        </li>
        <li class="menu_item">
            <a href="#">
                Item5
            </a>
        </li>
    </ul>
</div>

使用以下 CSS 设置样式:

#menu {
    position: relative;
    width: 715px;
    height: 40px;
}

#menu > ul {
    display: block;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    border-left: 1px solid black;
    width: 100%;
    height: 100%;
}

#menu > ul > li {
    display: table;
    height: 100%;
    text-align: center;
    float: left;
    border-right: 1px solid black;
    width: 142px !important;
}

Firefox 正确显示；然而，在 Chrome 中，所有元素的宽度都是 141px 而不是 142。我不能只将数字增加 1，因为这样它在 Firefox 中会太宽，无法放在一行中。

我该怎么办？请帮忙。

编辑:截图:
Chrome 列表:img694.imageshack.us/img694/5088/chromelist.png
Firefox 列表:img840.imageshack.us/img840/8689/firefoxlist.png

编辑 2: 如果我从“ul”中删除 border-top 和 -bottom 并添加到“li”，那么在 Chrome 中它不再是 141px 而是...143px。我不知道更改垂直边框会如何影响宽度...

Answer 1

如果您删除 display: table;，它们的行为应该相同。

您可能需要添加 list-style-type:none 和一些填充来对齐文本。