블로그 이미지

카테고리

데꾸벅 (194)
Publisher (39)
Scripter (97)
Programmer (1)
Designer (30)
Integrator (18)
Pattern Searcher (4)
News (2)
강좌 및 번역 (3)

최근에 달린 댓글

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 */
 


참조 : 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]-->

다음과 같이 .ie처럼 만들어 준다. 위의 예제파일을 참조하세요 

div.foo { color: inherit;}
.ie div.foo { color: #ff8000; }

 

dbloom blog를 보면 다음과 같이 IE8에서의 CSS-Hack을 추천한다.

IE8 표준모드 Only:
.test { color /*\**/: blue\9 }

IE8을 포함한 IE버전
.test { color: blue\9 }








 

Post by 넥스트리소프트 데꾸벅(techbug)

댓글을 달아 주세요

  1. 2010.01.04 15:09 신고 파이델  댓글주소  수정/삭제  댓글쓰기

    좋은정보 감사합니다^^

  2. 2010.01.09 21:31 신고 츠이사키  댓글주소  수정/삭제  댓글쓰기

    좋은정보 정말 감사합니다..
    IE7 이하까지는 알았지만, IE8을 몰라서(우습게도 IE8에서만 문제가 발생하더군요..) 고민했었습니다..
    혹시나해서 찾아봤더니 다행이 IE8용 핵도 있네요.

  3. 2010.05.27 16:00 모카  댓글주소  수정/삭제  댓글쓰기

    ie8만 적용되는걸 찾다가 보게 되어 적용해봤는데요. 왜 전 ie7도 같이 적용되는 걸까요????
    다른분들은 정말 ie8만 적용되시나요???

  4. 2010.06.01 11:05 모카  댓글주소  수정/삭제  댓글쓰기

    제 브라우저가 ie8이긴하나 ie테스터로 ie6, 7, 8을 .test { color /*\**/:blue\9;} 의 스타일을 테스트한 결과 6을 제외한 7,8에서 글씨가 파란색으로 나왔습니다. 제가 적용을 잘못한건지, 아니면 테스터와 실제 ie7이 다른건가요?

  5. 2010.08.03 15:10 사막여우  댓글주소  수정/삭제  댓글쓰기

    \ 와 \이 다른건가요? 역슬레시를 특수문자로 쓰는건가요? 아님 \를 그냥 써도 되는건가요?

  6. 2012.02.28 14:38 데미나인  댓글주소  수정/삭제  댓글쓰기

    이런.. ㅜㅜ color /*\**/: blue\9 이거 ie9에서도 적용되는군요.. ㅜ