IE7 문제점 해결: z-index, 리스트 계단현상, Hack, hasLayout

E7 문제점 해결: z-index, 리스트 계단현상, Hack, hasLayout

Windows XP의 경우 '인터넷 익스플로러 6(IE6)'이 자동으로 함께 설치된다고 해도 얼마 사용하지 않아 '익스플로러 8(IE8)'을 설치하라고 권고합니다. 그만큼 익스플로러 8 이하 버젼이 웹표준에 어긋난다는 것인데요. 아직 많은 사이트들이 익스플로러 6, 7(IE6, IE7)에 맞추어 만들어져 있어서 익스플로러 8 이상에서 제대로 작동하지 않는 경우가 많습니다.

그러다보니 익스플로러 8을 사용하는 네티즌들이  호환성보기를 클릭하여 이전 버젼에 적합하도록 설정하여 웹서핑을 하게 됩니다.

IE8을 설치하고 IE7 정도의 수준으로 사이트를 본다는 얘기죠.

이런 경우 웹표준으로 만든 사이트들이 오히려 레이아웃이 깨지는 등 제대로 보여지지않는 경우가 발생합니다.
물론 세월이 흐를수록 웹표준에 맞지 않는 IE8 이하 버젼은 소멸되겠지만 그동안이라도 웹표준으로 작업하는 개발자들은 IE7에서도 사이트가 뜰 수 있도록 신경을 써서 만들어야 합니다. 소위 '크로스 브라우징'을 얘기하는 사람들이 하위 버젼이라고 무시해선 안됩니다.

 

IE8과 IE9도 완벽하게 웹표준을 따르고 있진 않지만 그나마 이전 버젼보다는 많이 개선된 상태입니다.
IE10부터는 마이크로소프트도 웹표준 규약을 완전히 따는다니 다행한 일이죠.

웹표준에 맞게 작업을 했을 때 IE7에서 발생하는 잦은 문제점과 해결책을 간단하게 정리합니다.

1. IE7에서 z-index가 먹지 않는 경우

 

참고: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html

 

IE7에서는 포지션(position)이 지정된 엘리먼트의 자식노드는 부모노드의 z-index를 따릅니다.
이를테면 A 박스를 감싸고 있는 B 박스(position:relative;)의 z-index 값이 지정되지 않으면 A 박스의 z-index 값이 100 이더라도
B 박스의 지정되지 않은 z-index 값 '0'을 따르게 된다는 얘기입니다. 그렇게 해서 위로 올라와서 보여져야 하는 A,B 박스가 C 박스의 아래로 내려가 보이게 됩니다.

이를 해결하기 위해서는 A 박스를 감싼 B 박스에 A 박스와 동일한 z-index 값을 원하는 결과를 얻을 수 있습니다.

 

 

2. IE7에서 리스트로 나열한 부분(이미지 포함)이 차례로 내려가는 계단현상을 보일 때

 

<div id="gnb"> <ul> <li><a class="menu1" href="#url"></a></li> <li><a class="menu2" href="#url"></a></li> <li><a class="menu3" href="#url"></a></li> </ul> </div>

CSS:

#gnb { display:block; width: 390px; height: 80px; } #gnb .menu1{ float:left; width:100px; height:80px; } #gnb .menu2{ float:left; width:90px; height:80px; } #gnb .menu3{ float:left; width:200px; height:80p;x }

이와 같이 블럭(block)형태를 취하고 float: left로 차례대로 왼쪽으로 붙일 때
menu2와 menu3의 부분이 계단현상을 보이며 차례로 내려가는 모양을 보일 경우가 많습니다.

이때는 <li>에 [display:inline; ]을 적용해주면 해결됩니다.

 

#gnb li { display:inline; }

 

3. IE6, IE7의 고질적인 패딩/마진문제를 해결하기 위한 Hack

IE6 에서만 적용하기 (Underscore Hack)

 

.test {margin:20px; _margin:15px}

Property 앞 부분에 언더바(_)만 붙여주면 됩니다. 이렇게 하면 IE6에서만 해당 Property가 적용됩니다.
 

IE7 에서만 적용하기
 

.test {margin:20px;} *:first-child+html .test {margin:15px;}

*:first-child+html를 앞에 붙여주면 됩니다. 
위 예제는 test 클래스에 margin 20px을 적용하되, IE7에서만 margin 15px을 적용시키고 있습니다.
 

IE8 적용하기 

 

.test {margin:20px; margin:15px\9}

Property 값의 마지막에 \9를 쓰면 되는데, IE6이나 7에서도 같이 인식이 되는 문제가 있습니다. IE6,7 핵으로 다시 정의해 줘야 한다는 얘기죠. IE8 관련 문제는 많지 않으므로 이 Hack은 그다지 많이 쓰지 않습니다.

필독: hasLayout 속성과 홀리 핵(Holly hack)
http://blog.wystan.net/2007/08/14/understanding-haslayout-property-and-holly-hack

 

[출처] IE7 문제점 해결: z-index, 리스트 계단현상, Hack, hasLayout|작성자 서성혁