带有三角形的纯CSS语音泡泡：Firefox无缘无故地呈现丑陋的1px边框？

Question

我正在尝试使用边框三角形技术做一个简单的对话框，通过覆盖两个三角形，一个带有我想要的边框颜色，另一个带有讲话泡泡的背景颜色，使用：before和：after伪类：

Here's a JSFIDDLE

.bubble:before, .bubble:after {
    border-style: solid;    
    content:"";
    display: block;
    position: absolute;
    width: 0;
}
.bubble:before {
    border-color: #DCDCDC transparent;
    border-width: 33px 0 0 33px;
    bottom: -33px;
    left: 40px;
}
.bubble:after {
    border-color: #FFFFFF transparent;
    border-width: 35px 0 0 35px;
    bottom: -30px;
    left: 37px;
}

问题是.bubble：三角形之后。出于某种原因，Windows 8上的Firefox渲染了一个我没有定义的额外边框，这看起来非常糟糕。

它在Chrome上运行得非常好，甚至Internet Explorer 10,9和8也能很好地显示。

有什么想法吗？

Answer 1

您需要添加

border-style: outset;

<强>更新 使它在FF上更加明显

border-style: solid outset;

到你的

.bubble:before, .bubble:after {

（更新了JSFiddle） http://jsfiddle.net/bFFrK/1

Answer 2

马上，我正在考虑两个快速建议尝试。我没有运行Windows 8，所以我不能自己尝试这些，但为什么不在我们太介入之前尝试这些：

首先添加-moz前缀并复制一些边框样式：

.bubble:after {
border-color: #FFFFFF transparent;
border-width: 35px 0 0 35px;
-moz-border-width: 35px 0 0 35px;
bottom: -30px;
left: 37px;
}

这只是一个快速的尝试。

如果这不起作用，您应该尝试将border-style: outset;添加到.bubble类（:before和:after伪类）。我还会输入z-index值，以使三角形稍微兼容。

这是jsfiddle： http://jsfiddle.net/JJ3uk/2/

如果你想在创建CSS三角形时让生活更轻松，我偶然发现了这个伟大的CSS三角形生成器。如果你感兴趣，它甚至包括向后兼容性的选项，一直到IE6。它似乎是最好的一个：

CSS triangle generator

让我/我们知道这是否能解决问题，或者其他事情是否解决了。

修改

您可能还需要手动设置三角形边框的RGB值，而不是仅使用透明，因为border-style: outset可能会更改FF17中边框的颜色。

border-color: rgba( RED-VALUE, GREEN_VALUE , BLUE-VALUE, 0) rgba(RED-VALUE, GREEN-VALUE,  BLUE-VALUE, 0) rgba(RED-VALUE, GREEN-VALUE, BLUE-VALUE, 0) #ffffff;