This [code](http://jsfiddle.net/purmou/4HPmM) 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 .