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>
'Local Oriented > HTML CSS JS' 카테고리의 다른 글
float 과 text-align 의 이상한 만남..? (0) | 2012.03.21 |
---|---|
동영상을 object 로 기술할 경우 embed 도 같이 기술해 주세요. (1) | 2012.01.06 |
a 태그에 name 속성 사용시 주의사항 (0) | 2011.12.05 |
CSS 스타일, 팝업시 배경 투명도, opacity alpha 투명도는 30% 대가 적정..? (0) | 2011.11.09 |
모바일 기기에 특화된 메타 태그 (2) | 2011.11.07 |