Someone has any idea why this code does not work for firefox?

Question

This code works for chrome as I want but it does not work for 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; 
}

and

<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>

The problem is that on firefox instead of moving text 2 px up, it moves borders two px down. How can I fix this?

If there is no idea, then, please, suggest another version which will have the same effect on text inside .

Answer 1

Try changing this:

a { display:block; ... }

to

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