css - 带有三 Angular 形的纯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