CSS 호환성을 위하여 MS의 인터넷익스플로러 브라우저 구분하는 방법

웹 표준으로 개발하면서 CSS를 적용하다 보면 항상 IE가 문제가 됩니다. 

구글 크롬, 파이어폭스, 애플 사파리 모두 제대로 보이는데 IE만 이상하게 보이는 경우가 종종 있습니다. 

IE 8 버전 이후로 웹 표준을 많이 따르기 때문에 좋아졌다고는 하지만 아직도 안 맞는 부분들이 있네요. 

IE 브라우저의 CSS 구분

이런 경우, CSS Hack이라고 하는 특정 브라우저만 적용할 수 있는 편법들이 나오기도 하지요. 

이외에도 일반적으로 사용하는 방법이 브라우저를 파악해서 다른 CSS 파일을 링크하도록 구성하는 겁니다. 

다음 소스를 한번 보시죠.. 

<!--[if IE]> <link href="/css/common_ie.css" rel="stylesheet" type="text/css" /> <![endif]--> <!--[if !IE]><!--> <link href="/css/common.css" rel="stylesheet" type="text/css"> <!--<![endif]-->

이렇게 하면 IE에서는 common_ie.css 파일을 사용하게 되구요. 

다른 브라우저에서는 common.css 파일을 사용하게 됩니다. 

이게 가능한 이유는 IE 브라우저가 8버전을 내 놓으면서 

기존의 IE 7 이하와 호환성을 유지하기 위해 HTML에 <!--[if IE] 라는 구문을 주석 형태로 넣었기 때문입니다. 

다른 브라우저에서는 주석이므로 무시하게 되고, 오직 IE에서만 해당 구문을 읽어서 동작하게 되는 것이죠. 

(정말 편법은 대단합니다. ^^)

단순히 IE만 구분하는 것이 아니라 IE의 버전별로도 구분할 수 있습니다. 

<!--[if IE]> <h1>Internet Explorer입니다</h1> <![endif]--> <!--[if IE 5]> <h1>Version 5</h1> <![endif]--> <!--[if IE 5.0]> <h1>Version 5.0</h1> <![endif]--> <!--[if IE 5.5]> <h1>Version 5.5</h1> <![endif]--> <!--[if IE 6]> <h1>Version 6</h1> <![endif]--> <!--[if IE 7]> <h1>Version 7</h1> <![endif]-->

Table width 문제 발생시 처리 

특히 IE의 경우, Table의 width가 제대로 처리되지 않는 문제가 많이 발생했었는데요. 

"IE table width problem"으로 구글 검색 해보면 상당히 많은 글들이 나옵니다. 

저의 경우에도 희한하게 IE에서만 Table 구조가 깨지는 경우가 있어서 다음과 같이 처리해 봤습니다. 

<table style="table-layout:fixed"> ... </table>

table-layout 속성은 CSS2부터 포함된 것인데요. 

fixed 값으로 설정되어 있으면 테이블의 넓이를 각 테이블이나 셀에서 설정한 대로 보여주라는 것입니다. 

그러므로 Table내에 width를 잘 설정했다면 IE가 임의대로 출력함으로써 Table 구조가 깨지는 것을 방지해 주는 것이죠.

CSS에서 IE 7과 IE 8, 9의 호환성 유지하는 방법

인터넷 익스플로러에서도 IE 7버전과 8, 9 버전의 호환성을 유지할 필요가 있습니다. 

특히 좌우 여백을 설정하는 경우에 주로 차이가 발생하는데요. 이런 경우 사용할 수 있는 팁은 다음과 같습니다. 

.pass { width:323px; height:44px; margin-left:56px;}
*:first-child+html .pass {margin-left:28px;}

위와 같이 설정하면, IE 7에서 margin-left:28px 가 적용되고 IE 8이나 9에서는 margin-left:56px가 적용되네요. 

이와 관련한 참고 사이트는 http://www.dynamicsitesolutions.com/css/filters/first-child-plus-html/ 를 보시면 됩니다.