티스토리 뷰

hasLayout (IE 버그 대응하기)

hasLayout 이란?



has Layoyt : "레이아웃을 가진다" 라는 뜻으로 hasLayout은 IE에서만 사용하는 독자적인 개념입니다.  IE 브라우저만의 고유한 렌더링 방식으로 많은 IE 버그와 관련이 있는데요. 구버전의 IE의 경우 CSS 속성값이 제대로 적용되지 않을 떄 hasLayout 속성을 지니게 되면 대부분 해결됩니다.

(*참고* IE8 이후 버전부터는 hasLayout이 적용되지 않습니다.)




구버전의 IE의 경우 CSS 속성값이 제대로 적용되지 않을 때의 경우


- IE float 버그

- 기본 속성이 표준과 다르게 적용되는 박스

- 마진이 겹쳐지는 현상(더블 마진)

- 리스트(ol, ul)에서 발생하는 버그들

- 배경이미지 위치 해석 문제

- 스크립트의 브라우저 호환성 문제




hasLayout : true


hasLayout을 true로 설정하면 요소는 레이아웃을 가진 것으로 인식이 되어 렌더링이 되며,

hasLayout을 false로 설정되면 요소는 렌더링되지 않습니다.



1. 기본값으로 레이아웃을 지닌 HTML요소가 있다.


<html>

<body>

<table>, <tr>, <td>, <th>

<img>

<hr>

<input>

<button>

<select>

<textarea>

<fieldset>

<legend>

<object>

<embed>

<applet>

<iframe>

<marquee>



2. 특정 CSS속성 값을 사용하면 레이아웃을 갖게 된다. (hasLayout 속성을 갖게 됨)


position : absolute


float : left | right


display : inline-block


width : auto를 제외한 값


height : auto를 제외한 값

/*height: 1%를 주로 핵으로 사용*/


zoom : normal를 제외한 값

/*zoom은 IE의 독점적인 속성으로 유효성 검사에서 통과하지 못하므로 조건부 주석을 통해 처리.*/


overflow : hidden | scroll | auto

/*IE7에서 사용. 이전 버전에서는 적용되지 않음*/


overflow-x,overflow-y:hidden | scroll | auto 

/*IE7만 적용*/


min-width/min-height :아무 값

/*속성값 0을 써도 레이아웃을 갖는다*/


max-width/max-height :아무 값


**비 레이아웃 요소에서는 hasLayout이 적용되지 않는다.

ex)인라인 요소(span...), width나 height가 없는 순수 div요소


<출처> http://aboooks.tistory.com/276 참고 및 일부 인용

Recent Comments