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

Question

我正在尝试使用边框三角形技术做一个简单的语音气泡,通过覆盖两个三角形,一个用我想要的边框颜色,另一个用语音气泡的背景颜色,使用:before和:after伪类:

这是一个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