Межбраузерный отступ / поля

Question

Мне было интересно, не могли бы вы дать мне несколько полезных советов о том, как исправить эту проблему? У меня есть главное меню на моем сайте, код для которого выглядит следующим образом:

li:hover {
    background-color: #222222;
    padding-top: 8px;
    padding-bottom: 9px;
}

А вот демонстрация того, как это на самом деле выглядит:

Проблема в том, что при наведении указателя мыши на пункт меню (li) появляется фон, но он перетекает за пределы фона меню и делает его действительно хитрым / дерьмовым / дешевым / гадким!

Обратите внимание, что (очевидно), когда я изменяю отступ, чтобы он правильно отображался в этих браузерах, в IE он кажется слишком маленьким по высоте! Так что я облажался в любом случае. Как сделать так, чтобы такие небольшие недостатки выглядели одинаково во всех браузерах?

Обновление:

HTML (Меню):

            <ul class="menu">
                <li class="currentPage" href="index.php"><a>Home</a></li>
                <li><a href="services.php">Services</a></li>
                <li><a href="support.php">Support</a></li>
                <li><a href="contact.php">Contact Us</a></li>
                <li><a href="myaccount/" class="myaccount">My Account</a></li>
            </ul>

CSS:

.menu {
    margin-top: 5px;
    margin-right: 5px;
    width: 345px;
    float: right;
}

li {
    font-size: 9pt;
    color: whitesmoke;
    padding-left: 6px;
    padding-right: 8px;
    display: inline;
    list-style: none;
}

li:hover {
    background-color: #222222;
    padding-top: 8px;
    padding-bottom: 9px;
}

Answer 1

Вы можете предотвратить проблемы, не меняя отступы в зависимости от наведения. Кроме того, вы должны навести курсор на

Работает ли это как ожидалось? Пример JSFiddle

Answer 2

Ваши проблемы, вероятно, связаны с использованием дисплея: встроенный. Попробуйте установить явную высоту на ул. Выполнение этого с вашим примером сработало для меня:

ul {
 border-bottom: 2px solid black;
 height: 28px;
}

Я добавил границу, чтобы можно было увидеть, где я выравнивался.

Кстати, правильное решение - не использовать li: hover, а a: hover, как уже было сказано.