• 작성일 작성일 : 14-02-05 12:59 / 조회 : 5,282

크로스브라우징의 난적 ie8

 글쓴이 : 외인 트위터 페이스북 미투데이 C공감

자식 엘리먼트에 영향을 미치는 상위 엘리먼트는 position속성이 static이어야 한다.

즉, 정적상태를 유지하여야 하는 것이다. 

따라서 position이 relative / absolute가 되었을때 바로 자식엘리먼트에 영향을(좌표상으로) 미치게 됨으로offsetParent를 반환하는 대상 엘리먼트는 반드시 position이 relative나 absolute가 되어야 한다. 

즉 수식으로는 getStyle(obj, ‘position) != ‘static’ 으로 표현될 수 있다.


일반적으로 offsetParent가 많이 사용되는 부분은 대상엘리먼트를 글로벌 좌표포지션으로 변환한 후 이값을 활용하는 곳들이다.


그런데..IE브라우져(ie8 이하)의 경우 상위 엘리먼트의 position이 ‘relative’ 일때 자신의 offsetLeft가 0이 되어야 하는데 디폴트로 최상위 엘리먼트의  padding (paddingLeft/paddingTop)값을 취하도록 설계되어 있다.



<div id=“a” style=“background-color:#ff0000; padding:30px; “>
    <div id=“b” style=“position:relative; background-color:#000000; “>
        <div id=“c” style=“position:relative; background-color:#0ff000; “>
            <div id=“d” style=“background-color:#666666;”>
                aaaa<br>
                aaaa<br>
            </div>
        </div>
    </div>
<div>
</div></div>

위의 노드중 d의 입장에서는 부모 position이 relative이기 때문에 당연 자신의 offsetLeft는 0이어야 한다.

왜냐면 상대경로로 다시 초기화 되었으니..부모입장에서 padding값이 들어간게 아니니까... 만약 부모의 position이 relative가 아니면 그제서야 부모 offsetParent가 static이 됨으로 그때는 자신이 30의 값을 가져야 한다. 그런데 IE7는 무조건 30의 값을 가지고 시작한다. 즉 최상위 a의padding(padding-left)이 30임으로 그값에 영향을 받아서 표시를 하게된다. 바로 이게 문제다. 이 문제로 인해 최종 글로벌 포지션의 left는30이어야 함에도 불구하고 60이 되어버린다. 결국 이중값이 들어간다는 말이다.

따라서 IE7의 경우에는 바로 이 최상위 엘리먼트, 즉 body바로 밑의 엘리먼트를 구한후 (이것은 해당 엘리먼트가 position이 relative나absolute가 아닌경우 반환하지 않으므로) 해당 엘리먼트의 padding값을 빼줘야 한다.



참조 : HappyFriday 글


  • 이전글 다음글
  • 목록
go top google+ page facebook tistory rss