블로그나 홈페이지를 만들 때 요즘 추세는 반응형 디자인입니다. 문제는 이 반응형 디자인이 익스플로러 구형 버전에서는 호환되지 않습니다. 따라서 많은 반응형 홈페이지(사이트)들이 윈도XP나 윈도우7에서 익스플로러8과 같은 구형 브라우저를 사용하면 페이지 화면이 깨지는 경우가 종종 나타납니다.
이럴 때는 html 문서에 다음과 같이 익플 브라우저 버전을 지정해주고 CSS 파일을 추가로 만들면 됩니다.
익스플로러9 이하 버전에 적용
<!--[if lte IE 9]>
<link rel="stylesheet" media="screen" type="text/css" href="CSS 파일 위치">
<![endif]-->
<!--[if lte IE 9]>
<style>CSS 내용</style>
<![endif]-->
gte : IE9 버전 이상 <!--[if gte IE 9]>css 링크<![endif]-->
gt : IE9 버전 초과 <!--[if gt IE 9]>css 링크<![endif]-->
lte : IE9 버전 이하 <!--[if lte IE 9]>css 링크<![endif]-->
lt : IE9 버전 미만 <!--[if lt IE 9]>css 링크<![endif]-->
IE8 버전만 적용 <!--[if IE 8]>css 링크<![endif]-->
위 내용의 약자는 다음과 같습니다.
gt(greater than) gte(greater than or equal) lt(less than) lte(less than or equal)
* 만약에 위 주석 내용을 인식 못 하면, <head> 태그 마지막 부분, </head> 바로 위에 위치시키면 됩니다.
하나의 CSS 파일에 적용하고자 할 때
위 방법은 각각 CSS 파일을 만들어야 하므로 수정할 때마다 각각의 파일을 별도로 수정해야 하는 번거로움이 있습니다. 아래 방법은 하나의 CSS 파일에 각 익스플로러 버전별로 스타일시트를 사용하는 방법입니다.
<!--[if gte IE 8]>
<html class="old_ie">
<![endif]-->
CSS 내용
body {background: #fff; }
.old_ie body {background: #eee; }
'iT와 인터넷 활용' 카테고리의 다른 글
| 모젠 네비게이션 업데이트하기 (0) | 2016.04.27 |
|---|---|
| 현대 네비게이션 업데이트 쉽게쉽게 (0) | 2016.04.26 |
| 기아 네비게이션 업데이트 제대로하기 (1) | 2016.04.26 |
| warning case open detected 부팅오류 해결 (2) | 2016.04.17 |
| 모든 인터넷뱅킹 오류 간단히 해결하기 (0) | 2016.03.31 |
| 올레 해지 (인터넷으로 모바일 휴대폰 태블릿 요금) (0) | 2016.03.29 |
| 로우포맷 - 하드디스크를 로우레벨로 초기화시키다. (HDD Low Level Format Tool) (1) | 2016.03.10 |
| USB 무선랜카드로 노트북 와이파이 만들기 3편 (4) | 2016.03.04 |