IE7 - 절대 위치가 Firefox와 다른 점?

Question

저는 CSS를 사용하여 외설적 인 일을 한 다른 개발자의 작업을 정리하고 있습니다.

페이지에 기본 "래퍼"div가 있으며이 안에는 탐색을위한 로고와 이미지가 있습니다. 이미지는 "position : absolute"를 사용하고 CSS "top"속성을 사용하여 이미지를 오프셋합니다. 그러나 파이어 폭스와 IE는 다른 지점에서부터 오프셋을 시작하는 것으로 보이는데 이는 로고가 IE에 있어야하는 위치의 약 100 배 위에 있다는 것을 의미한다.

IE CSS 버그 또는 알려진 것입니까? 문제

예 : http://barry.cityjoin.com/mccamb/

Answer 1

당신이 절대적으로 상단, 오른쪽, 하단 및/또는 왼쪽을 사용하여 래퍼 내에서 요소를 배치 할 경우, 래퍼의 위치가 명시 적으로 상대적으로 설정해야합니다. 그렇지 않으면 절대 요소가 뷰 포트 내에 배치됩니다.

작은 작업 예 :

<style> 
    .wrapper 
    { 
     position: relative; 
     height: 100px; 
     width: 800px; 
    } 
    .absoluteLogo 
    { 
     position: absolute; 
     top: 10px; 
     left: 10px; 
     height: 60px; 
     width: 80px; 
    } 
    .absoluteElement 
    { 
     position: absolute; 
     top: 80px; 
     left: 320px; 
     height: 20px; 
     width: 80px; 
    } 
</style> 

<div class="wrapper"> 
    <div class="absoluteLogo">Logo</div> 
    <div class="absoluteElement">Element</div> 
</div> 

다른 가능성은 마진을 이용하여 절대 요소를 배치하는 것 :

<style> 
    .wrapper 
    { 
     height: 100px; 
     width: 800px; 
    } 
    .absoluteLogo 
    { 
     position: absolute; 
     margin: 10px 0 0 10px; 
     height: 60px; 
     width: 80px; 
    } 
    .absoluteElement 
    { 
     position: absolute; 
     margin: 80px 0 0 320px; 
     height: 20px; 
     width: 80px; 
    } 
</style> 

<div class="wrapper"> 
    <div class="absoluteLogo">Logo</div> 
    <div class="absoluteElement">Element</div> 
</div> 

결과가 동일하고 모든 브라우저에서 작동되어야한다.