Chrome - CSS边框无法正常工作

Question

我有一个带有文本的内联块元素，我希望它以虚线下划线。由于我无法使用text-decoration属性进行设置，因此我将border-bottom添加到元素中。但它在Chrome中表现得相当奇怪 - 边框的颜色不是我指定的，它看起来有点透明。然而，它在IE和Firefox中看起来很完美。如果我没有指定底部边框并且只绘制所有四个边框，则一切看起来都正确。我还尝试将元素包装到另一个div中，但没有给出任何结果。此外，当我将line-height增加到3.1和更多时，问题就会消失，但边界显然远离文本。我使用的是最新版本的Chrome。我还附上截图来描述问题。

CSS代码：

.contacts_link-to-map {
    display: inline-block;
    border-bottom: 1px dashed #FFD4F3;
    font-size: .8em;
    line-height: 1.1;
}

以下是CodePen的链接：http://codepen.io/GALLlblSH/pen/MwwRNB?editors=110

Moz / IE中的边界：

Chrome中的边框：

更新：我找到了一个解决方案，但它确实很奇怪，似乎与问题无关。我刚刚以margin: 5px 0 0 0;样式删除了.contacts_social行，一切都很顺利。有人知道这种行为的原因是什么吗？

Answer 1

尝试在border-bottom

的css行上方添加此项

 border-top: 1px dashed rgba(0,0,0,0);

这有点像黑客，但似乎解决了你的问题

Codepen revised css