奇怪的黑色边框：在Firefox中的css箭头之后

Question

为了在我的工具提示中使用纯CSS创建一个箭头，我在Firefox中遇到了一个问题：

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

以下是a 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>

此second demo表明背景透明是根本原因，因为用颜色替换透明会导致Chrome和Firefox中的渲染相同。

Answer 1

2015＆＃39;编辑

现在它可以同时使用RGBa和transparent;显然，Bug已经解决了（可能是顺便说一句，因为它仍然处于状态NEW，而不是在FIXED上）。

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

---

是

  

Bug 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;