transition 크로스브라우징 문제 도와주세요.

transition 크로스브라우징 문제 도와주세요.

QA

transition 크로스브라우징 문제 도와주세요.

본문

html


<td class="td_new onoff_btn">
<input type="checkbox" name="it_use[<?php echo $i; ?>]" value="1" id="use_<?php echo $i; ?>" <?php echo ($row['it_use'] ? "checked" : ""); ?>>
<label for="use_<?php echo $i; ?>"></label>
</td>

 

css


.onoff_btn input[type="checkbox"]{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0;}
.onoff_btn input[type="checkbox"] + label{display:inline-block; width:60px; height:30px; background:#e2e2e2; border-radius:15px; position:relative; vertical-align:middle; font-size:9px; padding:3px 1px; cursor:pointer; text-align:left;}
.onoff_btn input[type="checkbox"] + label::after {content:'off'; display:inline-block; width:24px; height:24px; background:#fff; border-radius:50%; text-align:center; line-height:25px; position:relative; left:3px; -webkit-transition:all .5s; -moz-transition: transition:all .5s;}
.onoff_btn input[type="checkbox"]:checked + label{background:#d00829;}
.onoff_btn input[type="checkbox"]:checked + label::after{transform:translate(29px); content:'on';}

 

크롬에서는 부드럽게 움직이는데 IE 랑 EDGE 에서는 transition 효과 없이 움직이기만 합니다.

어떤 문제일까요...? 도움부탁드립니다.

이 질문에 댓글 쓰기 :

답변 1

IE 10 버전 미만은 Transition 을 지원하지 않는다고 합니다.

 

JQuery를 이용해서 IE9 이하 버전에서도 작동하게끔 하는 방법이 있다고 합니다.

http://louisremi.github.io/jquery.transition.js/test/index.html

 

위 주소대로...

 

해결방법은 직접 만드시거나, 그냥 크로스 브라우징 지원해주는 라이브러리 가져다가 쓰셔야할 것 같습니다.

답변을 작성하시기 전에 로그인 해주세요.
전체 2

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT