html - 奇怪的黑边 :after css arrow in Firefox

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 年编辑

现在它通过使用 RGBa 和 transparent 来工作；显然，该 Bug 已得到解决(可能是偶然的，因为它仍处于 NEW 状态，而不是 FIXED 状态)。

如果您仍然遇到这种情况，则您可能运行的是旧版本的 FireFox(当前版本是 38.0.5)，您可以使用答案中的解决方法来解决该问题。

---

这是

Bug 646053 - dark diagonals at corner joins adjacent to transparent borders

解决方法是使用 RGBa而不是透明:

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

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