이게 왜 ie8,9,10, 파이어 폭스에 다르게 뜰까요?
본문
크롬하고 IE11, 엣지는 잘 뜹니다.
근데 왜 제목에 말씀드린 IE 구버전들과 파이어폭스에는 다르게 뜰까요?
별거 없는 소스인데...
left 옆에 right를 놓고 right안에 right2를 자식 div로 넣는것 뿐인데
브라우저마다 천차만별입니다.
left 넓이가 100%라 right가 옆으로 안붙고 아래로 내려가는거같은데
이게 또 크롬이나 최신 브라우저들에서는 원하는대로 옆으로 뜹니다.
혹시 IE 구버전들은 display : table 속성을 못쓰나요?
가르침 부탁드립니다.
<!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: 600px;
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>
</head>
<body>
<div id="left"></div>
<div id="right">
<div id="right2"></div>
</div>
</body>
</html>
답변 2
ie 구버전은 사용추이로 보면 매우 미미합니다.
요즘 개발자들은 특수한 경우 빼고는 ie10이상으로 개발을 진행하는것으로 알고 있어요.
밑에 호환성 메타 넣어보면 다르게 보입니다.
<meta http-equiv="X-UA-Compatible" content="IE=edge">
알려주신대로 메타 속성 넣으니 되긴하는데 이것도 좀 다른게 크롬에서는 오른쪽 div 색이 right2 색인 붉은색이 나오는데 IE 구버전이나 파이어폭스는 right의 색인 살색이 나오네요. right2가 right 위로 올라와야 정상인데 그러지 못하는겁니다.
이거 그냥 단순 IE구버전만 그러면 무시하려고 했는데 파이어폭스 최신까지 이러니 그냥 넘어갈수가 없네요.
제일 상단에
html,body,form {margin:0; padding:0;}
이렇게 추가하시면 왼쪽으로 원하시는데로 붙을거에요.
답변을 작성하시기 전에 로그인 해주세요.
