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 中相同的呈现。如何解决?
最佳答案
首先,在我的 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基于你的。
关于html - chrome 29 和 firefox 23 (ubuntu 12.04) 中不同的边框位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18704373/