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

火狐渲染：

铬合金：

我想要在 chrome 中与在 Firefox 中相同的渲染。如何解决？

Answer 1

First of all, in my copies of Firefox (Stable/Nightly on OSX/Windows) your fiddle renders like what you have for "Chrome".

You could make the a an inline-block and balance the border out by a negative margin of the same size:

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

Complete fiddle based on yours.

Answer 2

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

.st1 { height:22px;}

这似乎可以解决问题。

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