奇怪的黑色边框:在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>

此第二演示表明背景透明是根本原因如在铬和Firefox相同的渲染替换透明通过颜色的结果.

Answer 1

2015年的编辑

现在它通过使用RGBa和transparent; 显然,Bug已被解决(可能是顺便说一句,因为它仍处于状态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;