Chrome - CSS 边框无法正常工作答案

【问题标题】：Chrome - CSS border not working correctlyChrome - CSS 边框无法正常工作
【发布时间】：2015-07-13 06:36:06
【问题描述】：

我有一个带有文本的 inline-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 中的边框：

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

【问题讨论】：

最好将codepen或jsfiddle链接与现有代码共享。
添加了 CodePen 的链接
无法复制，抱歉。也许尝试使用 rgba(); 将颜色设置为 100% 不透明度；
在 Mac、Chrome、Firefox 中按原样呈现边框。您指的是哪个操作系统？

标签： css google-chrome border border-color

【解决方案1】：

尝试在你的 CSS 行上方添加边框底部

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

这有点小技巧，但似乎可以解决您的问题

Codepen revised css

【讨论】：

不幸的是，它没有。似乎当底部边框是唯一可见时（无论是否存在其他边框）它看起来更透明。