Firefox中的CSS三角形问题

我需要使用CSS三角形来创建箭头。这是一个即时通讯工作：http://jsfiddle.net/7vRca/Firefox中的CSS三角形问题

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

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

}

enter image description here

的问题是，在镀铬看起来完美。但在Firefox中，中间有一个小弯曲。

任何想法为什么会发生这种情况，我怎样才能让它看起来很平滑？

来源

2012-12-27 Ivin

看起来是一样的，以我在win7- FF17.01两种浏览器和Chrome 23.0.1271.97 – Kyle

林看到一个小1px的粗糙/中间的边缘断裂，两个边界相遇。我使用mac osx。 – Ivin

我不__看到它在jsfiddle，FF17.0.1，Win8 ...直线和光滑。 – KekuSemau

我还没有一个mac不幸测试和Windows上的Firefox似乎呈现正确。你可以得到解决，虽然这个问题...

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

而不是呈现三角形边界两侧，它平展右边框只使用上边框以达到相同的形状，避开任何对齐问题（如下图所示）。

Border right-angled triangle

这可能是火狐在Mac OS中呈现DIV的像素高度可能使用溢出隐患被解决，但同样如果不是更可能的是，在渲染算法取整有导致浏览器和操作系统的组合在右边界的边缘选择不同的像素。这将是我的猜测，为什么它会发生。

来源

2012-12-27 12:08:32

太棒了！这解决了它。 :)你能帮我理解这里发生了什么？ – Ivin

我已经添加了一些关于我为什么可能会发生的猜测。我假设你了解我的解决方法是如何工作的。如果你不知道，请告诉我 –

尝试使用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

编辑：顺便说一下，它worsk在我的Firefox两种方式（一个带有灰色线，其他没有，但从来没有你描述的效果...）

来源

2012-12-27 12:04:32

Nop，它没有工作。 – Ivin

对不起，我不能再现它/ –

为透明边框设置'inset'对我有帮助。我发现这招在这里：http://css-tricks.com/snippets/css/css-triangle/#comment-103785

来源

2013-01-16 10:21:37 kiid

尝试加入到CSS这样的：