拉弧在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

回答

相關問題