[IE핵] CSS 브라우저별 핵 정리 - Comprehensive List of Browser-Specific CSS Hacks

Comprehensive List of Browser-Specific CSS Hacks

/***** Selector Hacks ******/
 
/* IE 6 and below */
* html #uno  { color: red }
 
/* IE 7 and below */
*:first-child+html #dos { color: red } 
 
/* IE 7 and modern browsers */
html>body #tres { color: red }
 
/* Modern browsers (not IE 7) */
html>/**/body #cuatro { color: red }
 
/* Opera 9.27 and below */
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  }
}
 
/***** Attribute Hacks ******/
 
/* ie6 and below */
#once { _color:blue }
 
/* ie7 and below */
#doce { *color: blue } /* or #color:blue */
 
/* 'Modern Browsers' includes IE8, whether you agree or not.. :) */

http://paulirish.com/2009/browser-specific-css-hacks/




/***** 속성 핵 ******/

/* ie6 이상 */

#once { _color:blue }

/* ie7 이상 */

#doce { *color: blue } /* or #color:blue */

-----------------------------------------------------------------------

파폭은 일반값(styleName), IE7은 #styleName, IE6은 _styleName으로 각각 지정

순서는
styleName:value (ex, margin:5px;) /* for other IE */
#styleName:value (ex, #margin:5px;) /* for IE7 */
_styleName:vlue (ex, _margin:5px;) /* for IE 6 */

컨디셔널 커맨트 사용하기 - CSS IE, FF 구분 & JS :

http://haco.tistory.com/1948

ex.
사용방법 : 아래처럼 IE외 브라우저용 CSS를 사용하고 밑에 IE용 CSS를 사용..
<link rel="stylesheet" type="text/css" href="basic.css" />
<link rel="stylesheet" type="text/css" href="editor.css" />
<link rel="stylesheet" type="text/css" href="post.css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="basic.ie.css" />
<link rel="stylesheet" type="text/css" href="editor.ie.css" />
<link rel="stylesheet" type="text/css" href="post.ie.css" />
<![endif]-->