hasLayout 이란 (IE버그 해결책)
has layout이란,' 레이아웃을 가진다'라는 뜻입니다.
haslayout 속성이란?
제가 처음 haslayout을 접한 것은
'triggers for hasLayout'라고 쓰인 주석을 보고 나서인데
구IE의 경우, CSS 속성값이 올바로 적용되지 않을 때, 렌더링 오류나 버그가 생길 때
haslayout 속성을 지니게 되면 해결되는 부분이 많다고 해서 찾아보게 되었습니다.
css에 실제 haslayout 속성이 존재하는 것은 아닙니다.
haslayout은 인터넷 익스플로러(IE)에서만 사용하는 독자적인 개념입니다.
hasLayout 속성이 탄생한 배경:
아주 오래전 ie는 구식의 렌더링 엔진을 사용했는데, 그때는
인라인 내용을 제외하고 거의 모든 요소가 박스였습니다.( 테이블로 레이아웃을 하던 시기)
이때는 내용이 테이블 셀 밖으로 , 또는 테이블 셀이 테이블 밖으로 흘러나올 이유가 없었습니다.
하지만 css가 등장하면서, 내용이 float되거나, 박스보다 내용이 길거나 넓으면
박스에서 내용이 흘러 넘쳤습니다.
마이크로소프트 개발자는 오래된 엔진에 기초한 이러한 문제들을 해결하기 위해 hasLayout 속성이란 개념을
도입합니다.( hasLayout은, IE 렌더링 엔진의 내부 구성요소)
hasLayout 속성은 말 그대로 레이아웃(layout)을 가지게(has) 만듭니다
IE 버그 상당수가 레이아웃을 가지면 해결되는 경우가 많습니다.
* hasLayout속성은 ie8 표준 모드에서 제거됨. ie7-호환 모드에는 여전히 존재함.
hasLayout을 true로 설정하면 요소는 레이아웃을 가진 것으로 렌더링 되며(읽히며),
(그래서 요소는 넘쳐나는 내용을 담기 위해 확장 됨)
hasLayout이 false면 요소는 렌더링하지 않습니다.
위에서 hasLayout이란 css 속성이 실제 있는 것은 아니라고 했습니다.
그러므로 hasLayout:true 라는 것도 존재하지 않습니다.
그럼 어떻게 hasLayout 속성이 true 또는 false가 되는 걸까요?
hasLayout : true
1. 기본값으로 레이아웃을 지닌 HTML 요소가 있음.
2. 특정 css 속성 값을 사용하면 레이아웃을 가지게 됨. (hasLayout 속성을 지니게 됨)
1. 레이아웃을 기본값으로 가지고 있는 요소
<html>
<body>
<table>, <th>,<tr>, <td>
<img>
<hr>
<input>
<button>
<select>
<textarea>
<fieldset>
<legend>
<object>
<embed>
<applet>
<iframe>
<marquee>
2. 다음 css 속성/속성값을 쓰면, 요소가 레이아웃을 가지게 됨.
position: absolute
float: left|right
display: inline-block
width: auto를 제외한 값
height: auto를 제외한 값
/*height: 1% 을 주로 핵으로 사용한다.*/
zoom: normal을 제외한 값
/*보통 zoom: 1이 디버깅 할 때 사용 됨.
zoom은 ie 독점적인 속성이며(validation 유효성 검사에서 통과하지 못하므로 조건부 주석을 통해 처리 )*/
writing-mode: tb-rl
/* ie 독점적인 속성이며 유효하지 않음 */
overflow: hidden|scroll|auto
/* ie7에서 사용. 이전 버전에서 적용되지 않음.*/
overflow-x|-y: hidden|scroll|auto
/*css3 박스 모델 모듈의 일부로서, overflow-x 와 -y는 널리 사용되지는 않음.
ie7 이전 버전에서 작동되지 않음.*/
min-, max- 속성 사용
/*ie7에서 사용. width, height작동하는 것과 비슷하게 행동*/
min-width/min-height: 아무 값
/* 속성값 0을 써도 레이아웃을 가지게 만듦. */
max-width/max-height: none 제외한 아무값
일례로, 순수 div에 width 값을 설정하면 레이아웃을 가지게 됨
div{width: 100px;}
hasLayout : false
hasLayout : false를 설정하는 방법은 없습니다.
처음에 hasLayout:true되었던 css 속성을 재설정하거나, 제거하는 것 말고는!
*비 레이아웃 요소에서, hasLayout은 작동하지 않습니다.
(예: 인라인 요소(span 같은)나, 너비, 높이가 없는 순수 DIV)
hasLayout 재설정하기
다음 속성들을 기본값으로 재설정하면, hasLayout를 재설정하거나 취소함.
width/ height :auto
max-width/ max-height :none ( IE 7에서)
position : static
float :none
overflow :visible (IE 7에서)
zoom:normal
writing-mode:tb-rl에서 lr-tb로
이들 속성을 재설정할 때는 예상치 못한 결과를 초래할 수도 있으므로 주의해야 합니다.
hasLayout에 관한 좀 더 긴 설명이 있는데 제가 이해한 부분은 여기까지이고
나중에 좀 더 필요 내용을 추가해 보도록 하겠습니다.
하기 사이트를 참조해서 작성했습니다~
http://haslayout.net/haslayout
http://www.satzansatz.de/cssd/onhavinglayout.html
http://www.sitepoint.com/web-foundations/internet-explorer-haslayout-property/
http://basicuse.net/articles/pl/textile/html_css/haslayout_in_internet_explorer
'css' 카테고리의 다른 글
| [css] 색상값 단위 5가지(rgba 포함) (2) | 2014.09.23 |
|---|---|
| [css3] opacity 속성(투명도 지정) (0) | 2014.09.22 |
| [css1] ::first-letter 가상 요소 (0) | 2014.09.17 |
| [css1] ::first-line 가상 요소 (0) | 2014.09.16 |
| [css3] :empty 가상 클래스 (0) | 2014.09.15 |
댓글