IE 조건부 주석, 익스플로러8 용 html CSS 태그로 반응형 디자인에 적용하다.
블로그나 홈페이지를 만들 때 요즘 추세는 반응형 디자인입니다. 문제는 이 반응형 디자인이 익스플로러 구형 버전에서는 호환되지 않습니다. 따라서 많은 반응형 홈페이지(사이트)들이 윈도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; }