그린 아크 FF

이 코드를 사용하여 원 내부 호를 그리려고 노력하고 왜곡되어 http://jsfiddle.net/C9vVN/그린 아크 FF

코드는 크롬, IE와 오페라에 대한 작동하지만 Firefox에서는 왜곡되어 보입니다.

enter image description here 의견이 있으십니까?

미리 도움을 주셔서 감사합니다.

출처

2013-07-18 Panos Kal.

파이어 폭스의'.arc1 : before '과'.arc2 : before'에서 어떻게'border-radius : 38 %;'를 시도해 보지 마십시오. – Prix

@Prix 크로스 브라우저를 사용하여 FF 용으로 고치지 않고 코드가 왜곡되어 보이게하는 코드가 필요합니다. –

그 이유는 바로 내가 코멘트로 올린 이유입니다. – Prix

상자 크기는 firefox (caniuse.com)의 경우 -moz 접두사가 필요합니다.

-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 :': before' : http://jsfiddle.net/T9tXw/ 1 /하지만 당신의 솔루션은 이미 작동합니다. – Passerby

@Passerby 그렇습니다. 공급 업체 접두사는 [표준 구현 전에] 와야합니다 (http://css-tricks.com/ordering-css3-properties/). CSS2가 아닌 CSS3 구문을 지원하는 브라우저가 있습니까? 나는 IE8이 단일 콜론 구문을 지원한다고 알고있다. (http://caniuse.com/css-gencontent) 그러나 다소 오래되었다. – Mike

IE8은'transform'이 필요하기 때문에이 페이지에서 결코 작동하지 않을 것입니다. 그래서 더블 콜론을 사용하면 오래된 브라우저를 "필터링"할 수 있습니다. – Passerby

그린 아크 FF

답변

관련 문제