html - 奇怪的深色边框：在 Firefox 中的 css 箭头之后

Question

为了在纯 CSS 中为我​​的工具提示制作一个箭头，我在 Firefox 中遇到了一个问题：

我试图找到导致 Firefox 中黑色边框的原因，但没有成功。

这是一个 jsfiddle和一个正在运行的代码片段，演示了这个问题：

.tooltip {
    position:relative;z-index:1;
    display:inline-block;padding-right:10px;
}
.tooltip .info {
    position:absolute;left:100%;top:-7px;
    display:block;padding:7px;border:1px solid #cccccc;
    background:#fff;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow:  1px 1px 8px 0px rgba(0, 0, 0, .2);
    box-shadow:  1px 1px 8px 0px rgba(0, 0, 0, .2);
}
.tooltip .info img {float:left;}
.tooltip:after {
    content: '';
    position:absolute;top:0;left:100%;
    display:block;
    width:0;
    height:0;
    margin-left:-13px;
    border:0 solid transparent;
    border-right-color:#cccccc;
    color:#ccc;
}
.tooltip .info:after {
    content: '';
    position:absolute;top:7px;left:-12px;z-index:10;
    display:block;
    width:0;
    height:0;
    border:transparent solid 6px;
    border-right-color:#fff;
    color:#ccc;
}

<a class="tooltip">Test for tooltip<span class="info">My tootip information</span></a>

第二个演示演示了背景透明是根本原因，因为用颜色替换透明会导致 Chrome 和 Firefox 中的渲染相同。

Answer 1

2015年编辑

现在它可以同时使用RGBaand transparent; 显然，该错误已解决（可能是顺便说一句，因为它仍处于状态 NEW ，而不是处于 FIXED 状态）。

如果它仍然发生在您身上，您可能正在运行旧的 FireFox 版本（当前版本是 38.0.5），您可以使用答案中的解决方法来解决问题。

---

它是

错误 646053 - 角落处的深色对角线与透明边框相邻

解决方法是使用RGBa而不是transparent：

/* old */
border: transparent solid 6px;
border-right-color: #fff;

/* new */
border: rgba(255,255,255,0) solid 6px;
border-right-color: #fff;