ie6~7 버그 핵 정리

핵 잘정리된 사이트 http://browserhacks.com/

a:hover {border:1px;} //모든 브라우져 적용
*html a:hover {border:2px;} //IE6,7 만 적용
//여기서 html 은 원래 "." 또는 "," 가 와야 할 자리인데 html 이 오기 때문에 IE 4~6 mac IE 4~5 적용

**html {border:2px;} //IE7 에서만 적용
이건 안되는군요. 이렇게 하면 IE6 에서도 적용됩니다. 
아래처럼 해야 합니다. 제가 잘 못 알고 있는건지도..
*+html {border:2px;} //IE7 에서만 적용되고, IE6에는 적용되지 않습니다. 

#top {
    position:fixed !important;
    position:static;
}
//IE6 에서는 한 규칙안에서 여러개 속성을 사용할 수 없어 첫번째 속성은 무시되나, 타 브라우져는 important 가 적용되어 첫번째 속성이 적용됨.
//IE6 하위 모든 IE 계열에서 통용됨.

.under {
 display:inline;
 _display:block;
}
//IE6 이하 버젼에서는 "_" 속성이 인식되어, 첫번째 속성을 무시하고, 두번째가 적용됨 
//타 브라우져는 "_" 는 오류로 인식하고, 첫번째 속성이 적용됨. 

padding:0px; /* Only IE6 */
padding /**/:5px; /* IE7, FF */ 

IE6 vs IE7 및 기타 브라우져 (순서가 중요하다)

padding:0px; /* For FF */
*padding:5px; /* IE brothers */ 기타브라우져 vs  IE 계열 (역시 순서 중요)

오직 IE5/6 만 적용하지 않는방법 

이경우는 아예 속성자체가 인식이 안되야 할 경우, 이렇게 사용하면 되더군요.

}.mailmain-list .list-detail > table {
/* 오직 ie6 만 적용하지 않음 */
width: 100%

IE6/7 에서 position relative z-index 버그

div 내 레이아웃 절대위치를 지정하기 위해, relative 하위로 absolute 를 사용한다.

이때, IE6/7 은 z-index 가 먹지않아, 부모노드에 가려지는 버그가 발생한다.

이경우, 부모와 자식 모두에 z-index 를 주어야 하고, 당여히 자식의 z-index 가 보모보다 높은값이어야 한다.

<button> 마크업 
IE6/7 에서만 버튼에 무의미한 패딩이 들어갈 경우, overflow:visible; 로 속성을 주세요.
그러면 여백이 깔끔하게 사라집니다. 

더블마진 버그
float 을 쓴 객체가 연속 나열될때, IE6에서는 기본마진에 X2 가 되어 더블마진이 발생한다.
(뭐 이건 완전 XX같은 순수한 버그가 아닐까...)
이럴땐 float 을 쓴 객체에 마진값을 주었을때, display 속성을 inline 으로 주면 된다. (display:inline;)

Hooly Hack
* html {height 1px;}
Hooly Hack 은 IE 계열의 hasLayout 속성과 관련이 있다. 자세한 내용은 이곳에서 확인해 주세요.

브라우져별 상이한 width계산 오류
#content { width: 200px; padding-left: 10px; }
//이렇게 주게되면, IE 계열에선 총 width 를 200을 유지합니다. 
//하지만 다른 브라우져에서는 width 가 padding 까지 포함하여 210 을 유지합니다.
//아래처럼 핵으로 IE에선 210 을 유지하도록 추가합니다.
#content { width: 200px; padding-left: 10px; }
* html #content { width: 210px; } 
//padding 은 상위속성을 따라가고, content 의 width 는 변경합니다. 

parent.opener.form.fld.value = 'value';
는 IE에서만 작동됩니다. 아래와 같이 수정해야 합니다.
opener.document.form.fld.value = 'value';

IE6 > Transitional > Tabel 스크롤바 영역 초과 오류

IE6 DIV 하위 테이블에 layout fixed 가 적용된 경우, 스크롤바는 div width 를 초과하여 생성되어, div 가 밀립니다. 이경우, table 의 width 가 100% 이기 때문에 그런데, IE6 만 width:100% 속성을 적용하지 않으면 해결됩니다. 

IE6 > Transitional > Tabel TD nowrap 속성 안먹힘

IE6 에서 table td 의 nowrap 속성이 doctype 을 Transitional 로 선언할 경우, 적용이 되지 않습니다.
와전하게 해결한 것은 아니지만, TD 내부 태그를 <pre></pre> 로 감싸주면, wrap 이적용됩니다.