★CSS 핵★
IE 적용 Hack
- IE 6 hack (underscore hack)
프로퍼티의 가장 앞부분에 언더스코어(_)를 붙이면 IE6에서만 적용이 됩니다.
1 | #header {_width:100px} |
- IE 6 hack (star hack)
셀렉트 앞에 *html을 붙이면 IE6에서만 적용이 됩니다.
1 | *html #header {width:100px} |
- IE 6 hack (해시 hack)
속성앞에 #삽입 IE6이하 버전에서만 적용이 됩니다.
1 | #header {#width:100px} |
- IE 6 hack (!important hack)
IE6버전에서는 한규칙안에 여러 개의 속성을 사용할수없으므로 첫번째 선언을 무시하고 두번째 선언을 적용 !important속성이 우선시되어 두번째 선언을 적용하게 됩니다. 나머지 브라우저에선 첫번째 속성이 적용됩니다.
1 | #header {position:fixed !importent;position:static} |
- IE 7 hack (star hack)
셀렉트 앞에 *+html body 또는 *:first-child+html 을 붙이면 IE7 or Opera 에서 적용이 됩니다.
1 | *+html body #header {width:100px} /* IE7, OPERA 적용 */ *:first-child+html #header {width:100px} /* IE7 적용 */ |
- IE 7 hack (star hack)
프로퍼티의 가장 앞부분에 언더스코어(*)를 붙이면 IE7에서만 적용이 됩니다.
1 | #header {*width:100px} |
- IE 6, 7 hack (dot hack)
프로퍼티의 가장 앞부분에 닷(.)를 붙이면 IE6, 7에서만 적용이 됩니다.
1 | #header {.width:100px} |
- IE 7, 8, 9 hack (선택자 핵)
셀렉트 앞에 html>body를 붙이면 IE7, 8, 9 에서 적용이 됩니다.
1 | html>body #header {width:100px} |
- IE 8 hack (속성 핵)
프로퍼티의 속성값 앞부분에 (/*＼**/)를 붙이면 IE8에서만 적용이 됩니다.
1 | #header {width:/*＼**/100px} |
- IE 8, IE9, IE8+9 hack (속성 핵)
프로퍼티의 속성값 뒷부분에 \0/IE8 를 붙이면 IE8 에서 적용이 됩니다.
프로퍼티의 속성값 뒷부분에 \0/IE9 를 붙이면 IE9에서 적용이 됩니다.
프로퍼티의 속성값 뒷부분에 \0/IE8+9 를 붙이면 IE8과 IE9 모두 적용이 됩니다.
1 | #header{width:100px \0/IE8;/*IE8적용*/width:150px \0/IE9;/*IE9적용*/ height:50px \0/IE8+9;/*IE8+9적용*/} |
- IE 9+10 hack (속성 핵)
셀렉트 앞에 @media screen and (min-width:0\0){} 를 감싸면 적용이 됩니다.
1 | @media screen and (min-width:0\0){#header{width:100px}} |
- IE 10 hack (속성 핵)
셀렉트 앞에 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {} 를 감싸면 적용이 됩니다.
1 | @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {#header{width:100px}} |
- FireFox hack
셀렉트 앞에 @-moz-document url-prefix() {}를 감싸면 적용이 됩니다.
1 | @-moz-document url-prefix() {#header {width:100px}} |
- Chorme hack
셀렉트 앞에 @media screen and (-webkit-min-device-pixel-ratio:0){}를 감싸면 적용이 됩니다.
1 | @media screen and (-webkit-min-device-pixel-ratio:0){#header {width:100px}} |
- Safari hack
프로퍼티의 속성값 앞에 html[xmlns*=""] body:last-child {}를 감싸면 적용이 됩니다.
1 | html[xmlns*=""] body:last-child #header{width:100px} |
- Opera hack
프로퍼티의 속성값 앞에 body:first-of-type #header {}를 감싸면 적용이 됩니다.
