Local Oriented/HTML CSS JS
이미지 위에 레이어를 올렸는데, 브라우저 폭이 변할때 같이 변하지 않거나 레이아웃에 가로줄이 생길때..
래빗 크리스
2011. 12. 21. 12:47
o 박스 안에 이미지와 절대좌표 박스가 들어간 형태에서 호환성 보기를 하면 레이아웃에 금이 가는 현상
다른 웹브라우저나, IE 일반 모드에서는 정상인데.. 유독 IE 호환성 보기에서 레이아웃이 깨짐.
<div style="position:relative" ...>
<img src=".." />
<div style="position:absolute" ...>
...
</div>
</div>
이때는.. img 와 absolute 인 div 사이에 공간이 없게 해야 하는군요.
<div style="position:relative" ...>
<img src=".." /><div style="position:absolute" ...>
...
</div>
</div>
그런데, 브라우저 폭이 변할때 absolute 로 잡은 영역이 같이 변하지 않아서 레이아웃이 깨진다면..
아래와 같이 relative 영역에 이미지를 가져다 사용하는 것이 필요.
<div style="position:relative; background:url('...'); width:..px; height:..px" ...>
<div style="position:absolute" ...>
...
</div>
</div>