블로그 이미지

카테고리

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

최근에 올라온 글

최근에 달린 댓글

'CSS Hack'에 해당되는 글 1건

  1. 2009.04.27 CSS Hack in IE8 9

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)
, |