테스트 사이트 - 개발 중인 베타 버전입니다

레이아웃으로 고생중입니다. 조언 부탁드립니다. 채택완료

헐크매니아 8년 전 조회 4,125

아래 코드를 해보시면 ie11, 크롬은 잘되는데

ie9버전과 파이어폭스는 무려 최신버전임에도 깨집니다.

css에서 table과 table-cell이 지원이 안되는건가 잘 안되네요.

조언좀 부탁드립니다.

 

</p><p><!DOCTYPE html></p><p><html></p><p><head></p><p><style></p><p>html,body{</p><p>        height: 100%;</p><p>        width: 100%;</p><p>        padding-top: 0px;</p><p>        padding-left: 0px;</p><p>    }</p><p>    </p><p>.wrap{</p><p>    height: 100%;</p><p>    width: 100%;</p><p>    display: table;</p><p>    }</p><p>    </p><p>#left{</p><p>    height: 100%;</p><p>    width: 100%;</p><p>    display: table-cell;</p><p>    background-color: aqua;</p><p>    }</p><p>    </p><p>#right{</p><p>    height: 100%;</p><p>    display: table-cell;</p><p>    background-color: burlywood;</p><p>    }</p><p>    </p><p>#right2{</p><p>    height: 100%;</p><p>    width: 300px;</p><p>    background-color: crimson;</p><p>    }</p><p>#chat{</p><p>    height: 100%;</p><p>    width: 300px;</p><p>    position: fixed;</p><p>    top: 0px;</p><p>    right: 0px;</p><p>    background-color: darkmagenta;</p><p>    }</p><p></style></p><p><script src="<a href="<a href="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" target="_blank" rel="noopener noreferrer">https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js</a>"><a href="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" target="_blank" rel="noopener noreferrer">https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js</a></a>"></script></p><p><script type="text/javascript"></p><p>$(function() {</p><p><span class="Apple-tab-span" style="white-space:pre">	</span>$("#tgl").on("click", function(e) {</p><p><span class="Apple-tab-span" style="white-space:pre">		</span>e.preventDefault();</p><p><span class="Apple-tab-span" style="white-space:pre">		</span>$("#right2,#chat").animate({</p><p><span class="Apple-tab-span" style="white-space:pre">			</span>width : "toggle"</p><p><span class="Apple-tab-span" style="white-space:pre">		</span>}, 1000);</p><p><span class="Apple-tab-span" style="white-space:pre">	</span>});</p><p>});</p><p></script></p><p></head></p><p><body></p><p><a href="#" id="tgl">toggle</a></p><p><div class="wrap"></p><p>    <div id="left"></div></p><p>    <div id="right"></p><p>        <div id="right2"></div></p><p>    </div></p><p>    <div id="chat"></div>    </p><p></div></p><p> </p><p></body></p><p></html></p><div>
댓글을 작성하려면 로그인이 필요합니다.

답변 2개

채택된 답변
+20 포인트

 

event.preventDefault() <--이벤트가 ie버전에서작동안함으로 생기는 것입니다.

 

 

 

 

 

 

참고자료

 

 

http://comajava.blogspot.kr/2015/12/ie-8-eventpreventdefault-internet.html">http://comajava.blogspot.kr/2015/12/ie-8-eventpreventdefault-internet.html

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

y
8년 전

모두 잘 나옵니다.

 

body{margin:0}

추가해보세요.

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

헐크매니아
8년 전
잘나오신다구요? 저는 left가 100%가로 다먹고 right, right2가 left에 밀려서 그 아래로 가는데
IE 구버전들도 잘나오시나요?

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인