Ширина горизонтального элемента списка в 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: Если я удаляю border-top и -bottom из 'ul' и добавляюв 'li' тогда в Chrome это уже не 141px, а ... 143px.Я понятия не имею, как изменение вертикальных границ может повлиять на ширину ...

Answer 1

Если вы удалите display: table;, они должны действовать одинаково.

Вам нужно добавить list-style-type:none и некоторые отступы для выравнивания текста.