Firefox 17和CSS基于边框的三角形未正确渲染

像许多前端开发人员一样，我一直在使用边界技巧在CSS中渲染三角形。 这台发电机有助于这项技术

今天，Firefox团队发布了一个新版本，在渲染引擎上没有任何明确的更改日志

现在我们可以看到这些三角形周围有一个不规则的灰色边界。我还没有找到摆脱它的窍门。 编辑：如果将“象棋般透明”背景强制为“绿色”，则更容易看到

最重要的是，在Firefox17之前，当人们抱怨这些三角形的别名如何时，另一个技巧是将边框样式属性设置为“虚线”而不是实线

使用三角形生成器上的firebug，您可以快速查看它现在是如何显示的

有人知道这个问题的解决方法吗

---

编辑：使用边框样式：按建议插入，在我的FF17上呈现较浅的颜色

好，这是我迄今为止最好的解决方案：

获取三角形的rgb值，并将其用作三角形相对边界的0不透明度rgba，而不是“透明”

保持基于旧语法的“透明”将作为IE8的后备方案

结果是这样的：

border-color: transparent transparent transparent #ffffff;
border-color: rgba(255,255,255,0) rgba(255,255,255,0) rgba(255,255,255,0) #ffffff;

正如回复中所说：将边框样式设置为“inset”会改变FF17上的颜色

---

我希望有人能找到一个更简单的解决方案，或者这篇文章能帮助其他人。

Adeher的修复和其他虚线边框修复的结合似乎能完美地解决FF23中的问题

长格式：

border-top: 10px solid #FF0000;
border-left: 30px dotted rgba(255, 0, 0, 0);
border-right: 30px dotted rgba(255, 0, 0, 0);

---

将Adeher的rgba（）修复与虚线边框修复（但仅在透明边框上）相结合，似乎可以渲染出一个没有难看的模糊边框的完美三角形。

在FF17中，我觉得这个三角形看起来不错。

试一试边框样式：如果Firefox按照生成器的建议渲染奇怪的灰色边框，则插入如何？因为在ff17I中它看起来很好，我忘记了这一点，它使firefox17I上的颜色变亮了。我可能有一个解决方案（除了将“插入”设置为改变颜色的边框样式）：使用“rgba（XXX，YYY，ZZZ，0）”而不是“透明”，XXX YYY和ZZZ是三角形颜色的rgba值。我现在正在为IE8&7@Adeher如果你找到了一个好的解决方案，那就是把它作为一个答案，并接受你自己的答案。