웹 개발 시 본인의 컴퓨터에 있는 브라우저에 맞춰

레이아웃을 짰는데 다른 브라우저나 다른 컴퓨터에서

테이블이 깨지거나 스크립트가 실행이 되지 않는다거나 하는

문제가 발생합니다.

특히 IE가 대표적인데, IE 버전별, 호환성보기 유무에 따라

렌더링 차이가 극심합니다.


IE에서 호환성보기 유무, 버전의 렌더링 차이를 해결하기 위해

head 태그 안쪽 가장 상위에 메타(meta) 태그 를 한줄 추가합니다.


content에 들어가는 내용이 IE 버전입니다.
<meta http-equiv="X-UA-Compatible" content="IE=5">
<meta http-equiv="X-UA-Compatible" content="IE=6">
<meta http-equiv="X-UA-Compatible" content="IE=7">
<meta http-equiv="X-UA-Compatible" content="IE=8">
<meta http-equiv="X-UA-Compatible" content="IE=9">
<meta http-equiv="X-UA-Compatible" content="IE=10">

Edge로 값을 주면 가장 최신 버전의 IE로 인식이 됩니다.
<meta http-equiv="X-UA-Compatible" content="IE=Edge">


ex) 아래와 같이 <head>바로 밑에 메타 태그를 추가하면 스크립트 실행과 테이블 출력 등 호환성 보기가 
     IE 버전 9를 기준으로 실행됩니다
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9">

</head>

Posted by 준콩ol

댓글을 달아 주세요

  1. 김우희 2013.09.13 13:52 신고  댓글주소  수정/삭제  댓글쓰기

    감사합니다!! 이 글을 통해서 몇주간 앓던 문제를 너무 속시원하게 해결했습니다!!
    너무 감사드립니다...

    • 준콩ol 2013.09.13 14:27 신고  댓글주소  수정/삭제

      잘 해결하셨다니 다행이네요~
      저는 대략적인 것들만 작성했는데
      이것 말고도 X-UA-Compatible를 검색해서
      정보를 많이 찾아보세요~
      상세하게 알고 적용하셔야 문제 없으실겁니다.

  2. 초보개발자 2013.09.16 16:33 신고  댓글주소  수정/삭제  댓글쓰기

    좋은정보 감사합니다.

  3. 초보 웹 개발자 2013.11.04 22:04 신고  댓글주소  수정/삭제  댓글쓰기

    정보 감사합니다 근데 실제 IE7 브라우저에서 실행을 한다면? IE7에서 문제가 있단 가정하에서요

    • 준콩ol 2013.11.05 11:39 신고  댓글주소  수정/삭제

      IETester라는 프로그램 아시나요?
      그 프로그램도 버전별로 테스트가 가능하지만
      100% 완벽하진 않습니다.
      대부분 어느정도까지는 테스트가 가능하지만 완벽하지는 않다는 얘기입니다.
      그래서 실제 브라우저에서
      테스트는 무조건 해봐야하는게 맞습니다.

  4. 김경민 2014.02.06 14:31 신고  댓글주소  수정/삭제  댓글쓰기

    아...이것때문에 하루가까이 고민하고 있었는데... 버전 호환을 이렇게 해주는군요...감사합니다! 혼자 끙끙 앓았던게 순식간에 해결됬어요!ㅎㅎ 아 저 하나만 물어볼께요.. 만약에 소스파일에 <meta http-equiv="X-UA-Compatible" content="IE=7"> 이렇게만 정의되어 있다면 그 버전에서만 사이트 이용이 가능한건가요?

    • 준콩ol 2014.02.06 17:46 신고  댓글주소  수정/삭제

      아뇨 그렇지는 않아요.
      IE7버전 엔진(?) 기준으로 구동되는 것일뿐..
      하지만..IE9 사용자가 IE7 에뮬레이터로 돌아가면 답답하겠죠.

  5. 초보자 ㅠ 2014.03.14 19:11 신고  댓글주소  수정/삭제  댓글쓰기

    죄송한데;;; 저걸 어떻게 수정하죠?ㅠ 뭘로 수정하나요? 인터넷기사를 불러야 하나요?

    • 준콩ol 2014.03.14 21:44 신고  댓글주소  수정/삭제

      인터넷 기사요???
      아..이건 직접 소스 수정을 하거나 웹 소스 작업을 하는 분들에게 유용한 글입니다.
      일반적으로 사용하실때는 아마 도움이 안되실거에요..
      무슨 문제인지는 모르겠지만..호환성 보기 버튼을 클릭해보시면 좋겠어요.

  6. 어려웡~ 2014.11.06 13:05 신고  댓글주소  수정/삭제  댓글쓰기

    정보 정말 잘봤습니다.. 헤메고있던 참에 이거보고 일단 해결되었네요.
    웹쪽이 점점 갈수록 이런 현상이 많아지네요.ㅜㅜ

  7. 배재학 2016.03.10 14:16 신고  댓글주소  수정/삭제  댓글쓰기

    덕분에 골치아픈 문제를 해결했습니다! ㅎㅎ
    정보 고마워요!

  8. 이영지 2016.08.15 13:38 신고  댓글주소  수정/삭제  댓글쓰기

    좋은 글 보고 갑니다~~^ ^ 감사해요~
    크롬과 익스플로러 사이에서의 호환은 어떻게 해결할 수 있을까요..?
    크롬 기준에서는 알맞게 출력되는데..
    익스플로러에서는 margin 이나 :hover 등 style 호환이 안 되는 점이 있습니다..
    html 1~2개월 전에 시작해서 홈페이지까지 거의 완성해 가고 있는데
    딱 이 부분에서 막히네요..
    처음부터 익스플로러 기준에서 다시 코딩을 해야하나요..?

    • 준콩ol 2016.08.15 13:40 신고  댓글주소  수정/삭제

      IE호환성은 진짜 호환마마 수준이죠.. 버전별로 다 맞춰 줘야하니..
      버전별 CSS를 별도로 두거나
      CSS 핵을 이용하거나
      이런식으로 맞춰주시면 됩니다.
      무엇보다 웹표준에 의거 제작하신다면 호환성 부분은 생각보다 큰문제는 없으리라봅니다.