관리자 0 112 0 0

출처 : http://www.biew.co.kr/5 

 

IE 적용 Hack

- IE 6 hack (underscore hack)

프로퍼티의 가장 앞부분에 언더스코어(_)를 붙이면 IE6에서만 적용이 됩니다.

1
#header {_width:100px}

- IE 6 hack (star hack)

셀렉트 앞에 *html을 붙이면 IE6에서만 적용이 됩니다.

1
*html #header {width:100px}

- IE 6 hack (해시 hack)

속성앞에 #삽입 IE6이하 버전에서만 적용이 됩니다.

1
#header {#width:100px}

- IE 6 hack (!important hack)

IE6버전에서는 한규칙안에 여러 개의 속성을 사용할수없으므로 첫번째 선언을 무시하고 두번째 선언을 적용 !important속성이 우선시되어 두번째 선언을 적용하게 됩니다. 나머지 브라우저에선 첫번째 속성이 적용됩니다.

1
#header {position:fixed !importent;position:static}

- IE 7 hack (star hack)

셀렉트 앞에 *+html body 또는 *:first-child+html 을 붙이면 IE7 or Opera 에서 적용이 됩니다.

1
*+html body #header {width:100px} /* IE7, OPERA 적용 */ *:first-child+html #header {width:100px} /* IE7 적용 */

- IE 7 hack (star hack)

프로퍼티의 가장 앞부분에 언더스코어(*)를 붙이면 IE7에서만 적용이 됩니다.

1
#header {*width:100px}

- IE 6, 7 hack (dot hack)

프로퍼티의 가장 앞부분에 닷(.)를 붙이면 IE6, 7에서만 적용이 됩니다.

1
#header {.width:100px}

- IE 7, 8, 9 hack (선택자 핵)

셀렉트 앞에 html>body를 붙이면 IE7, 8, 9 에서 적용이 됩니다.

1
html>body #header {width:100px}

- IE 8 hack (속성 핵)

프로퍼티의 속성값 앞부분에 (/*\**/)를 붙이면 IE8에서만 적용이 됩니다.

1
#header {width:/*\**/100px}

- IE 8, IE9, IE8+9 hack (속성 핵)

프로퍼티의 속성값 뒷부분에 \0/IE8 를 붙이면 IE8 에서 적용이 됩니다.
프로퍼티의 속성값 뒷부분에 \0/IE9 를 붙이면 IE9에서 적용이 됩니다.
프로퍼티의 속성값 뒷부분에 \0/IE8+9 를 붙이면 IE8과 IE9 모두 적용이 됩니다.

1
#header{width:100px \0/IE8;/*IE8적용*/width:150px \0/IE9;/*IE9적용*/ height:50px  \0/IE8+9;/*IE8+9적용*/}

- IE 9+10 hack (속성 핵)

셀렉트 앞에 @media screen and (min-width:0\0){} 를 감싸면 적용이 됩니다.

1
@media screen and (min-width:0\0){#header{width:100px}}

- IE 10 hack (속성 핵)

셀렉트 앞에 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {} 를 감싸면 적용이 됩니다.

1
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {#header{width:100px}}
FireFox 적용 Hack

- FireFox hack

셀렉트 앞에 @-moz-document url-prefix() {}를 감싸면 적용이 됩니다.

1
@-moz-document url-prefix() {#header {width:100px}}
Chorme 적용 Hack

- Chorme hack

셀렉트 앞에 @media screen and (-webkit-min-device-pixel-ratio:0){}를 감싸면 적용이 됩니다.

1
@media screen and (-webkit-min-device-pixel-ratio:0){#header {width:100px}}
Safari 적용 Hack

- Safari hack

프로퍼티의 속성값 앞에 html[xmlns*=""] body:last-child {}를 감싸면 적용이 됩니다.

1
html[xmlns*=""] body:last-child #header{width:100px}
Opera 적용 Hack

- Opera hack

프로퍼티의 속성값 앞에 body:first-of-type #header {}를 감싸면 적용이 됩니다.

 

Comments


제목 글쓴이
자주쓰는 미디어 쿼리 마스터욱
iframe 사용시 레퍼러를 숨기는 방법 마스터욱
capture="camera" 마스터욱
highcharts series data push example 마스터욱
DIV 높이 100%로 주기 마스터욱
뺑글이(로딩) 이미지와 CSS 마스터욱
백그라운드만 까맣게 처리하기, 폰트는 그대로 마스터욱
스마트 에디터 모바일에 최적화 시키기 마스터욱
Jquery Mobile 샘플 마스터욱
미디어 쿼리 기준픽셀 마스터욱
크로스 브라우징 HTML5 Audio 동영상 태그 마스터욱
jquery anchor(앵카) 구현하기 마스터욱
jquery data-mask 마스터욱
자바스크립트 - ksort(키값에 의한 정렬) 마스터욱
javascript - 브라우저 뒤로가기 버튼 눌렀을 경우, 질문하기 마스터욱
부트스트랩 네비게이션 서브메뉴 마우스 오버시에 하위메뉴 펼치기 마스터욱
부트스트랩 fieldset 마스터욱
부트스트랩 모달(modal) 가로(width) 사이즈 자동 관리자
동적 height 세로 중앙정렬 관리자
CSS 로 바코드 만들기   관리자
카테고리