'IE'에 해당되는 글 3건
- 2010.03.23 Microsoft Explorer 8(익스플로러8) 브라우저 새로운 세션으로 창 열기
- 2010.02.19 [css] IE(익스플로러) 버전별 호환성 문제 해결 - Hack(핵)
- 2009.07.15 CSS hack 정리
[소스 예]
<!--[if lt IE 6]>
<script src="IE6.js" type="text/javascript">
<![endif]-->
[설명]
IE : [if IE] - IE일 경우에만 처리한다.
IE 버전 : [if IE 7] - 해당 버전의 IE일 경우에만 처리한다. (5, 5.5, 6, 7, 8)
! : [if !IE] IE가 아닐 경우에만 처리한다.
lt : [if lt IE 5.5] IE버전이 5.5미만일 경우에만 처리한다.
lte : [if lte IE 6] IE버전이 6이하일 경우에만 처리한다.
gt : [if gt IE 5] IE버전이 5초과일 경우에만 처리한다.
gte : [if gte IE 7] IE버전이 7이상일 경우에만 처리한다.
() : [if !(IE 7)] 조건을 결합하여 처리한다. IE버전이 7이 아닐경우에만 처리한다.
& : [if (gt IE 5)&(lt IE 7)] 조건을 AND로 결합하여 처리한다. IE버전이 5초과 7미만일 경우에만 처리한다.
| : [if (IE 6)|(IE 7)] 조건을 OR로 결합하여 처리한다. IE버전이 6 또는 7일 경우에만 처리한다.
참고> CSS HACK(핵)을 사용하는 법도 있다.
[css-tip]CSS hack 정리
다양한 브라우저와 브라우저의 버그를 이용하여 특정 브라우저에만 css를 적용하는 것을 "CSS 핵"이라고 한다. 크로스브라우징을 위해 사용을 하고 있지만 사용하지 않고 구현하기를 권장한다.
css 핵은 사용하지 않는 것이 좋다.
새로운 브라우저가 생겼을 경우나 기존 브라우저의 버전 변경시 다시 손을 봐야 하는 경우가 생길 수도 있으며 css 문법상 올바르지 않는 것도 있을 수 있고 무엇보다 크로스브라우징, 웹 표준에 맞지 않아 올바른 CSS 라고 볼 수가 없다.
스타핵 (star hack)
셀렉트 앞에 * 을 붙히며 Win IE 4~7 에만 적용(IE8, FF에는 적용 안됨)
예> P { padding:3px; *
padding
:
0px
; }
/* IE8, FF는 padding:3px, IE4~7는 padding:0px 적용 */
셀렉트 앞에 *html 을 붙히며 Win IE 4~6, Mac IE 4~5 에만 적용
예> * html p {
padding
:
3px
; }
/* 맨앞에 *html 을 붙힌다. */
속성의 가장 앞부분에 언더스코어(_)를 붙이며 Win IE 4~6에만 적용
예> p {
_padding
:
3px
; }
/* padding 앞에 _ 를 붙힌다. */
해시 핵 (hash hack)
속성의 앞에 # 를 붙이며 Win IE 4~6, Mac IE 5, Opera 7, Mozila, Firefox 적용
(CSS의 문법상 속성의 앞에 #를 두는 것은 문법적으로 바르지 않다.)
예> p { #
padding
:
3px
; }
/* padding(속성) 앞에 #를 붙힌다. */
스타 7 핵 (star 7 hack)
셀렉트 앞에 html* 를 붙이며 Win IE 5.5~6, Map IE 5, Safari 에만 적용
(html* 과 선택자 사이에 공백을 두면 안된다.)
예> html*p {
padding
:
3px
; }
IE7 전용핵
셀렉트 앞에 *:first-child+html 를 붙히며, IE 7에만 적용
예> *:first-child+html p {
padding
:
3px
; }
사파리용 핵
body:first-of-type
예> body:first-of-type #wrap
이밖에도 브라우저 배제를 위한 핵과 박스모델 핵 패스필터 등이 있다.
소스 예>
style="text-align:left;padding-left:5px;*padding-left:7px;_padding-left:0px;"
소스 예 설명> 위 소스 중 padding 부분
[ff,ie8]padding-left:5px;
[ie7]*padding-left:7px;
[ie6]_padding-left:0px;