2

我正在尝试使用边框三角形技术做一个简单的语音气泡，通过覆盖两个三角形，一个具有我想要的边框颜色，另一个具有语音气泡的背景颜色，使用 :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:after 三角形。出于某种原因，Windows 8 上的 Firefox 呈现了一个我尚未定义的额外边框，这看起来非常糟糕。

在此处输入图像描述

它在 Chrome 上运行良好，甚至 Internet Explorer 10、9 和 8 也能完美显示。

有任何想法吗？

4

2 回答 2

5

您需要添加

border-style: outset;

更新 以使其在 FF 上更明显

border-style: solid outset;

给你的

.bubble:before, .bubble:after {

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

于 2013-07-04T18:00:26.090 回答
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 三角形生成器

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

编辑

您可能还需要手动设置三角形边框的 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;
于 2013-07-04T18:09:36.797 回答