Question

此code适用于我想要的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 px，它会向下移动两个px边框。我该如何解决这个问题？

如果不知道，那么，请建议另一个版本对内部文本产生相同的影响。

Answer 1

尝试更改此内容：

a { display:block; ... }

到

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

Answer 2

替代方式：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/

Answer 3

您已遇到https://bugzilla.mozilla.org/show_bug.cgi?id=599882

有人知道为什么这段代码不能用于firefox？

3 个答案: