CSS Hack in IE8
Publisher/CSS / 2009. 4. 27. 11:20
유입경로를 분석하다가 IE8용 CSS Hack을 찾는 분들이 많아 정리합니다.
지난 포스트(CSS Hack을 정리)에 이어 Full-Browsing을 위해서 아래와 같이 몇가지만 알면 CSS-Hack에 대한 모든것을 아실수 있을 겁니다.
/***** 선택자 Hacks ******/
/* IE 6 및 하위버전 */
* html #uno { color: red }
/* IE 7 및 하위버전 */
*:first-child+html #dos { color: red }
/* IE 7 및 최신브라우저(IE8포함) */
html>body #tres { color: red }
/* 최신브라우저 (IE7제외, IE8포함) */
html>/**/body #cuatro { color: red }
/* Opera 9.27 및 하위버전 */
html:first-child #cinco { color: red }
/* Safari */
html[xmlns*=""] body:last-child #seis { color: red }
/*safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho { color: red }
/* saf3, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#diez { background: #FFDECE; border: 2px solid #ff0000 }
}
/***** 어튜리브트 Hacks ******/
/* ie6 및 하위버전 */
#once { _color:blue }
/* ie7 및 하위버전 */
#doce { *color: blue } /* or #color:blue */
/* IE 6 및 하위버전 */
* html #uno { color: red }
/* IE 7 및 하위버전 */
*:first-child+html #dos { color: red }
/* IE 7 및 최신브라우저(IE8포함) */
html>body #tres { color: red }
/* 최신브라우저 (IE7제외, IE8포함) */
html>/**/body #cuatro { color: red }
/* Opera 9.27 및 하위버전 */
html:first-child #cinco { color: red }
/* Safari */
html[xmlns*=""] body:last-child #seis { color: red }
/*safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho { color: red }
/* saf3, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#diez { background: #FFDECE; border: 2px solid #ff0000 }
}
/***** 어튜리브트 Hacks ******/
/* ie6 및 하위버전 */
#once { _color:blue }
/* ie7 및 하위버전 */
#doce { *color: blue } /* or #color:blue */
full_browsing_css_hack.zip
참조 : Paul Irish's Blog
모든 IE에 똑같이 적용할때 추천하는 방법으로는 body에 클래스 선택자를 이용해서 다음과 같이 작성할수 있다.
<!--[if lt IE 7 ]> <body class="ie6"> <![endif]-->
<!--[if IE 7 ]> <body class="ie7"> <![endif]-->
<!--[if IE 8 ]> <body class="ie8"> <![endif]-->
<!--[if !IE]>--> <body> <!--<![endif]-->
<!--[if IE 7 ]> <body class="ie7"> <![endif]-->
<!--[if IE 8 ]> <body class="ie8"> <![endif]-->
<!--[if !IE]>--> <body> <!--<![endif]-->
다음과 같이 .ie처럼 만들어 준다. 위의 예제파일을 참조하세요
div.foo { color: inherit;}
.ie div.foo { color: #ff8000; }
.ie div.foo { color: #ff8000; }
dbloom blog를 보면 다음과 같이 IE8에서의 CSS-Hack을 추천한다.
IE8 표준모드 Only:
.test { color /*\**/: blue\9 }
IE8을 포함한 IE버전
.test { color: blue\9 }
'Publisher > CSS' 카테고리의 다른 글
| 화면전체 배경이미지인 웹사이트 만들기 (0) | 2009.11.04 |
|---|---|
| CSS로 Table 디자인 하기 (15) | 2009.04.28 |
| safari 및 google Chrome에서의 Fieldset CSS버그 (2) | 2008.09.08 |
| PNG(setPNG)를 이용시 이미지 토글 이벤트 먹는 경우 (2) | 2008.08.13 |
| CSS Hack(핵) 정리 및 IE6,7,FF3 CSS맞추기 (0) | 2008.08.02 |