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
위 주소대로...
해결방법은 직접 만드시거나, 그냥 크로스 브라우징 지원해주는 라이브러리 가져다가 쓰셔야할 것 같습니다.
아 그렇군요ㅠ 답변 감사합니다.
답변을 작성하시기 전에 로그인 해주세요.
