아래 코드를 해보시면 ie11, 크롬은 잘되는데
ie9버전과 파이어폭스는 무려 최신버전임에도 깨집니다.
css에서 table과 table-cell이 지원이 안되는건가 잘 안되네요.
조언좀 부탁드립니다.
Copy
<!DOCTYPE html><html><head><style>html,body{ height: 100%; width: 100%; padding-top: 0px; padding-left: 0px; } .wrap{ height: 100%; width: 100%; display: table; } #left{ height: 100%; width: 100%; display: table-cell; background-color: aqua; } #right{ height: 100%; display: table-cell; background-color: burlywood; } #right2{ height: 100%; width: 300px; background-color: crimson; }#chat{ height: 100%; width: 300px; position: fixed; top: 0px; right: 0px; background-color: darkmagenta; }</style><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script><script type="text/javascript">$(function() { $("#tgl").on("click", function(e) { e.preventDefault(); $("#right2,#chat").animate({ width : "toggle" }, 1000); });});</script></head><body><a href="#" id="tgl">toggle</a><div class="wrap"> <div id="left"></div> <div id="right"> <div id="right2"></div> </div> <div id="chat"></div> </div> </body></html>답변 2개 / 댓글 1개
채택된 답변
+20 포인트
2017-04-03 (월) 12:14:07
event.preventDefault() <--이벤트가 ie버전에서작동안함으로 생기는 것입니다.
참고자료
http://comajava.blogspot.kr/2015/12/ie-8-eventpreventdefault-internet.html
ysnet
2017-04-03 (월) 13:16:34
모두 잘 나옵니다.
body{margin:0}
추가해보세요.
답변에 대한 댓글 1개
헐크매니아
2017-04-03 (월) 13:35:48
답변을 작성하려면 로그인이 필요합니다.
IE 구버전들도 잘나오시나요?