拉弧在FF

我想使用此代码画一个圆内的弧形失真http://jsfiddle.net/C9vVN/拉弧在FF

的代码适用于Chrome浏览器，IE和Opera，但在Firefox中它看起来扭曲。

enter image description here 你有什么建议吗？

在此先感谢您的帮助。

来源

2013-07-18 Panos Kal.

不要问我如何，但尝试'边框半径：38％;'在'.arc1：before'和'.arc2：before' for firefox。 – Prix

@Prix我需要使用跨浏览器的代码，而不是为FF修复它，并使其在其他地方看起来扭曲 –

这就是我作为评论发布的原因。 – Prix

box-sizing需要Firefox的-moz前缀（caniuse.com）。

-moz-box-sizing: border-box; 
box-sizing: border-box;

这里是一个updated fiddle。

来源

2013-07-18 03:09:21 Mike

就我个人而言，我会始终在前缀版本后加上非前缀版本，并使用CSS3 [伪元素语法]（https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements）::之前'而不是CSS2 [伪类语法]（https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes）'：before'：http://jsfiddle.net/T9tXw/ 1 /但是你的解决方案已经有效了。 – Passerby

@Passerby你是对的，供应商的前缀应该[在标准实现之前]（http://css-tricks.com/ordering-css3-properties/）。有没有支持CSS3语法的浏览器，而不是CSS2？我知道[IE8只支持单冒号语法]（http://caniuse.com/css-gencontent），但它变得相当古老。 – Mike

因为它需要'transform'，所以IE8将永远不会在这个页面上工作，所以使用双冒号是一种“过滤”旧浏览器的方法。 – Passerby

回答

相关问题