html - Chrome 29和Firefox 23(Ubuntu 12.04)的边框位置不同

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中渲染：


铬：

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

最佳答案

首先，在我的Firefox副本中（在OSX / Windows上为Stable / Nightly），您的小提琴呈现的效果类似于“ Chrome”。

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

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

Complete fiddle根据您的。

关于html - Chrome 29和Firefox 23(Ubuntu 12.04)的边框位置不同，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/18704373/