[CSS]기반의 WebDesign 레이아웃을 할 때, 다양한 웹브라우저들을 만족시키기 위한 방법들

관련정보

• CSS 핵 정리

• CSS 핵 남용에 따른 문제점

IE hack

InternetExplorer에서만 적용되지 않는 스타일일 경우 아래처럼 (버전별 확인)

#order_table input {
    margin: 0 5px 5px 0;
}
*html #order_table input {  /* for IE6 */
    margin: 0 5px 0 0;
}
*:first-child+html #order_table input {  /* for IE7 */
    margin: 0 5px 0 0;
}

div 배경이미지표시

#menu-top {
    background: transparent url('/moin/temp/img/bg02-white-right.png') no-repeat right top;
    /* if it is not woking in IE insert follow line */
}
* html #menu-top { height: 1%; }

IE Box Model Problem

박스가 실제 표시되는 크기는,

• IE : width, padding, border 이 모두 합해진 크기.
• 일반 브라우저 : width 가 정해진 크기. (실제 width 는 padding, border를 뺀 크기)

코드예제

#sidebar {
    padding: 10px;
    border: 5px solid black;
    width: 230px; /* for IE */
    voice-family : "\"}"\";
    voice-family : inherit;
    width: 200px; /* original value for other browser */
}

html>body #sidebar {
    width: 200px; /* for opera */
}

Clearfix hack

http://www.positioniseverything.net/easyclearing.html

Float 사용시 하단으로 내려가는 IE

앞에 div 에서 float right 를 하고, 뒤에 div 에서 clear right 를 했을 때, IE에서만 화면에서 하단으로 내려가는 경우가 있다. 중간에 div 가 끼어있는 경우인데, 이때 div 를 span 으로 바꿔주면 해결된다.

최소높이지정

최소높이를 지정하는 min-height 속성은 [IE]에서는 동작하지 않는다. 다음처럼 처리

#contens_wrap {
    min-height : 500px;
}
* html #contens_wrap {
    height : 500px;
}

정리

/***** Selector Hacks ******/

/* IE 6 and below */
* html #uno  { color: red }

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