★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 /IE 8 ; /*IE8적용*/ width : 150px \ 0 /IE 9 ; /*IE9적용*/ height : 50px \ 0 /IE 8 + 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 {}를 감싸면 적용이 됩니다.