IE 버전에 따라 CSS hack 을 사용하지 않고 스타일 처리하기

IE 버전에 따라 CSS hack 을 사용하지 않고 스타일 처리하기

HTML 마크업의 가장 상위인 html 태그에 CC를 이용한 클래스를 사용

<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--><!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]--><!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]--><!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]--><head>  <title>welcome to OXch</title></head><body>...</body></html>

Boilerplate 에서 나온 HTML base template 이용, 예전 버전에서는 ie6, ie7, ie8 등의 클래스를 사용했지만 지금은 CC와 비슷한 형태의 클래스 명으로 사용하고 있다 ( lt-ie7, lt-ie8, lt-ie9 )

이처럼 클래스를 주고 나면 css 에서 핵을 사용하지 않고 IE 브라우저별로 대응이 가능해진다.

예를들어 IE6 에서만 margin 값을 다르게 줘야 한다면 css 의 셀렉터를

기본

.hello-box {margin:20px; width:200px; height:200px; background:green;}

인 형태를 IE6에서는 margin을 30px 로 줄 때

.hello-box {margin:20px; width:200px; height:200px; background:green;}.lt-ie7 .hello-box {margin:30px}

이와같이 html 태그에 부여한 클래스를 이용해 hello-box 라는 클래스를 재정의 하면 CSS에서 익스플로러 버전에 따라 css hack 을 사용하지 않고 깔끔하게 작업할 수 있다.


덧글

  • 요나 2012/10/11 13:56 # 답글

    저대로 테스트했는데 안되길래 확인해보니
    조 위에 'lt-ie7' 이 빠졌네요
    이소스가 제대로 먹힙니당

    <!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--><!--[if IE 7]>
    <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
    <!--[if IE 8]><html class="no-js lt-ie9"> <![endif]--><!--[if gt IE 8]><!-->
    <html class="no-js"> <!--<![endif]-->
댓글 입력 영역