css - Chrome - CSS 边框无法正常工作

Question

我有一个带有文本的行内 block 元素，我想让它有下划线。由于我无法使用 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