본문 바로가기

프로그래밍/Etc.

반응형 UI에서 IE 8 호완성 문제

IE 8때문에 UI작업을 하면 간혹 화면이 깨지는 경우가 발생합니다.

 

 

 

이는 특히 반응형 UI를 썼을때 많이 발생하는데요 IE8은 웹표준에 맞지 않아서 생기는 문제입니다. 물론 상용화가 된 Bootstrap UI는 아마 예외 처리가 잘 되어 있어서 문제점이 없을듯 한데 아주 오래전부터 사용하던 고정으로된 UI의 Css를 반응형으로 대응하도록 가변 픽셀로 바꿨을때 이런 문제점이 나타났습니다.

 

IE 8 호완성 문제점에 대해서 IE8과 호완되도록 할려면 어려가지 방법이 있을꺼같은데 제가 선택한 방법은 아래와 같습니다.

 

 

1. IE 8 일때 호완성 보기 메타 태그 삽입해서 IE Edge으로 동작하도록 하는 방법

 

<meta http-equiv="X-UA-Compatible" content="IE=edge">

 

하지만 이 방법은 사용자에게 호완성 보기 설정을 강요 해야 하는 경향이 있기 때문에 패스

 

2. IE8은 고정 픽셀로 Css정의 하고 IE9 이상부터는 가변형 픽셀로 정의했습니다.

 

 

    <link rel="stylesheet" type="text/css" href="./css/Netest.css" />
    <!--[if (ie 8) | (ie 7)]>
       <link rel="stylesheet" type="text/css" href="./css/test.css" />
    <![endif]-->   

 

 

여기서 <!--[if]><![endif]--> 구문으로 Css의 IF 문 처리를 해서 브라우저 버전별로 Css가 먹도록 설정했습니다.

 

IE 8 , IE 7 일경우에는 아래의 Css를 먹고 아닐경우는 위의  Css가 동작하게 됩니다.

 

IE 8 , IE 7 일경우에는 위의 Css의 클래스 명과 같기 때문에 이후에 로딩되는 아래의 Css 덮어 치는 현상으로 아래의 Css가 동작하게 됩니다.

 

 

 

여기서 사용되는 조건부 주석의 사용법은 아래와 같습니다.

 

조건부 주석의 사용법과 기호

 

! : 아니다  ex : if  !IE

lt : 작다    ex : if lt IE 8

lte : 작거나 같다 ex : if lte IE 8

gt : 크다

gte : 크거나 같다

() : 우선처리

& : AND

| : OR

 

 

 

저는 이와같은 방법으로 IE8의 호완성 문제에 예외 처리를 했습니다.

 

가장 좋은 방법은 Css를 브라우저별로 호완되도록 설정하는게 좋은 방법이긴 한데 저는 디자이너나 Html 코더가 아니라서 기존 Css를 분석해서 분기로 만드는것은 시간과 노력대비 별로라 생각되어서 이와같이 처리했습니다.

 

 

감사합니다.