У кого-то есть идеи, почему этот код не работает для Firefox?

Question

Этот код работает для Chrome так, как я хочу, но не работает для Firefox.

ul {
    list-style:none; 
}

li {
    display:inline-block;
    border:1px solid black;
}

a {
    display:block;
    margin:10px;
}

a:hover {
    position:relative;
    top:-2px;
    color:red; 
}

и

<ul>
    <li><a href="#">Hi there</a></li>
    <li><a href="#">Hi there</a></li>
    <li><a href="#">Hi there</a></li>
    <li><a href="#">Hi there</a></li>
    <li><a href="#">Hi there</a></li>
</ul>

Проблема в том, что в Firefoxвместо перемещения текста на 2 пикселя вверх он перемещает границы на два пикселя вниз.Как я могу это исправить?

Если нет идеи, то, пожалуйста, предложите другую версию, которая будет иметь такой же эффект на текст внутри.

Answer 1

Попробуйте изменить это:

a { display:block; ... }

на

a { display:inline-block; ... }

Answer 2

Вы сталкиваетесь с https://bugzilla.mozilla.org/show_bug.cgi?id=599882

Answer 3

Альтернативный способ: http://jsfiddle.net/dXSS9/

Здесь вы можете найти причины:

http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/

http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/