firefox中的CSS三角问题

Question

我需要使用CSS三角形来创建和箭头。这是我正在进行的工作：http://jsfiddle.net/7vRca/

<div class="arrow-outer"></div>

.arrow-outer{
border: 1em solid transparent;
border-top-color: #3bb0d7;
border-right-color: #3bb0d7;
height: 0;
width: 0;

}

问题在于它看起来很完美。但是在Firefox中间有一个小弯曲。

知道为什么会发生这种情况，我怎样才能让它看起来像Chrome一样光滑？

Answer 1

我遗憾地没有测试mac，Windows上的Firefox似乎正确渲染。你可以解决这个问题......

.arrow-outer {
  border: 2em solid transparent;
  border-right: 0;
  border-top-color: #3bb0d7;
  height: 0;
  width: 0;
}

不是将三角形渲染为边框的两边，而是将右边框展平以仅使用顶部边框来实现相同的形状，从而避免任何对齐问题（如下图所示）。

Mac OS上的Firefox可能会将div渲染为可能使用隐藏溢出来解决的像素高度，但同样不太可能的是，渲染算法中的舍入会导致选择不同的像素对于浏览器和操作系统组合的右边框边缘。这就是我为什么会发生这种情况的猜测。

Answer 2

为透明边框设置'inset'对我有帮助。我在这里找到了这个技巧：http://css-tricks.com/snippets/css/css-triangle/#comment-103785

Answer 3

尝试将此添加到css：

 -moz-transform: scale(.9999);

Answer 4

尝试使用RGB而不是透明，

<div class="arrow-outer"></div>

.arrow-outer{
   border: 1em solid rgba(255,255,255,0);
   border-top-color: #3bb0d7;
   border-right-color: #3bb0d7;
   height: 0;
   width: 0;
}

就像我们在这里所做的那样：Weird dark border :after css arrow in Firefox

---

编辑：顺便说一下，它在我的Firefox中有两种方式都有所恶化（一种是灰线，另一种没有，但是没有你描述过的效果......）