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/

在 Firefox 中呈现:

Chrome :

我想要在 Chrome 中呈现与在 Firefox 中相同的呈现。如何解决？

Answer 1

首先，在我的 Firefox 副本中(在 OSX/Windows 上稳定版/Nightly)，您的 fiddle 呈现的效果与您在“Chrome”中的呈现方式类似。

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

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

Complete fiddle基于你的。