Firefox中的CSS三角形问题 [英] CSS triangle issue in firefox

问题描述

我需要使用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中，中间有一个小弯曲。

任何想法为什么会发生这种情况，以及如何使它看起来像铬中一样平滑？

方案

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

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

不是将三角形渲染为边界的两边，而是将右边使用只有上边框来实现相同的形状，从而避免任何对齐问题（如下所示）。

Mac OS上的Firefox可能会将div渲染为像素高度，可以使用隐藏的溢出来解决，但同样地，如果渲染算法中的舍入不可能导致针对浏览器和OS的组合的右边界的边缘选择不同的像素，那么它们同样如此。这是我猜测它为什么会发生。

I need to use CSS triangle to create and arrow. This is the one Im working on: 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;

}

The issue is that in chrome it looks perfect. But in firefox there is a small bent in the middle.

Any idea why this is happening and how can I make it look smooth as in chrome?

解决方案

I haven't got a mac to test unfortunately and Firefox on Windows seems to render correctly. You could get around the problem though...

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

Instead of rendering the triangle as two sides of the border, it flattens the right border to achieve the same shape using only the top border, circumventing any alignment issues (illustrated below).

It is possible that Firefox on Mac OS is rendering the div as a pixel height which might be solved using an overflow hidden, but it is equally if not more likely that the rounding in the rendering algorithm has resulted in different pixels being selected for the edge of the right border for that combination of browser and OS. That would be my guess as to why it is happening.

这篇关于Firefox中的CSS三角形问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！