2014-12-02 3 views
0

제목에 명시된 바와 같이 모든 것은 CSS와 HTML에서 동일하지만 어떤 이유로 firefox는 라디오 버튼을 정사각형으로 표시합니다.크롬의 원형 버튼이지만 파이어 폭스의 사각형

크롬에 http://jsfiddle.net/u2yq3j50/4/을 열면 라디오 버튼이 원으로 표시됩니다. Firefox에서 열면 사각형으로 나타납니다.

#radio-demo input[type="radio"] + label:before에서 -moz-appearance: radio;을 시도했지만, 내 스타일링을 무시하고 선택할 수 없으므로 원하는 출력이 나오지 않습니다.

팁을 주시면 감사하겠습니다.

+2

접두어가없는 'border-radius' 및'box-shadow '속성이 누락 된 것처럼 보입니다. 사실, 더 이상 이러한 속성에 대한 접두어가 필요하지 않습니다. '불투명도'와 동일합니다. –

+0

감사합니다! 나는 그것이 접두어가없는 경계 반경이었다라고 생각한다! 배경을 위해 나는 단지 접두어가 붙지 않은 버전을 사용할 수 있습니까? 또한 내가 border-radius의 접두사 버전을 사용했거나 CSS에 대한 이상한 특이한 점이있는 이유에 대해 설명 할 수 있습니까? – echen

답변

1

기본은 먼저 온 :

-webkit-border-radius: 10px; 
border-radius: 10px; 

에 체크 아웃에 :

jsFiddle

가끔 내가 모든 않은 접두어 버전 잊어 브라우저 호환성에 묶여입니다. Here's an "ok" website 기본 css3 코드를 생성 한 다음 다른 브라우저의 접두어를 추가 할 수 있습니다.

+1

벤더 프리픽스의 95 %가 더 이상 필요하지 않다는 것을 지적하고 싶습니다. 가장 큰 예외는'-webkit-transform'과'-webkit-animation'입니다. 어떤 이유로 든 여전히 Chrome에서 "자연스럽게"지원되지 않습니다. –

+0

@nietthedarkabsol 글쎄, 그것을 지적 주셔서 감사합니다, 지금은 여전히 ​​그들을 사용하면 더 안전하게 느껴집니다 ^^. 당신이 말했듯이, 일부는 여전히 지원되지 않습니다. 실수로 그 예외를 두는 것을 잊어 버렸기 때문에 나는 그것을 좋아하지 않을 것입니다. – Alin

관련 문제