chrome 29和firefox 23中的不同边框位置（ubuntu 12.04）

Question

Html：

<div class="st1">
  <a href="#">test</a>
</div>
<div class="st2">
</div>

和css：

.st1 a {
    text-decoration: none;
    border-bottom: 2px solid red;
    padding: 0px;
    margin: 0px;
}
.st1 {
    padding: 0px;
    margin: 0px;
}
.st2 {
    padding: 0px;
    margin: 0px;
    border-top: 2px solid green;
}

http://jsfiddle.net/uk4Ug/embedded/result/

在firefox中渲染：

Chrome：

我希望Chrome中的渲染与firefox相同。如何解决？

Answer 1

首先，在我的Firefox副本（OSX / Windows上的稳定/夜间）中，您的小提琴呈现的就像您对“Chrome”所做的那样。

您可以将a设为inline-block并使边框平衡相同大小的负边距：

.st1 a {
     display: inline-block;
     /* ... */
}
.st1 a:hover {
    border-bottom: 2px solid red;
    margin-bottom: -2px;
    /* ... */
}

Complete fiddle基于你的。

Answer 2

您可以在div st1上设置高度，所以在这种情况下：

.st1 { height:22px;}

这似乎可以解决问题。

注意：如果增加字体大小，则必须增加div大小。