[CSS]기반의 WebDesign 레이아웃을 할 때, 다양한 웹브라우저들을 만족시키기 위한 방법들
관련정보
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 */