웹 개발 시 본인의 컴퓨터에 있는 브라우저에 맞춰
레이아웃을 짰는데 다른 브라우저나 다른 컴퓨터에서
테이블이 깨지거나 스크립트가 실행이 되지 않는다거나 하는
문제가 발생합니다.
특히 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>
'Language > HTML' 카테고리의 다른 글
| 라디오,체크박스 (radio, checkbox) 버튼 css (9) | 2013.07.24 |
|---|---|
| div iframe 퍼센트 높이조절 문제 해결(div, iframe height 100%) (2) | 2013.07.12 |
| HTML 웹표준, 유효성 검사 방법(W3C 지원) (0) | 2013.03.08 |
| IE 호환성 보기 문제 및 해결(스크립트, 테이블 깨짐 등) (16) | 2013.02.01 |
| HTML) 인쇄영역 나누기, 페이지 나누기 (16) | 2013.01.11 |
| 즐겨찾기에 추가 버튼 (0) | 2012.12.12 |
| 바탕화면에 바로가기 아이콘 변경 (0) | 2012.12.11 |
| 오른쪽 마우스 클릭 방지 (0) | 2012.12.03 |
| input="text"에서 커서 진입 시 한/영 default 값 설정(ime-mode) (0) | 2012.11.01 |
| input type="text"에서 onChange 사용하기(onPropertyChange) (0) | 2012.10.26 |
| window.showModalDialog 사용시 캐시 문제 (0) | 2012.10.10 |
댓글을 달아 주세요
감사합니다!! 이 글을 통해서 몇주간 앓던 문제를 너무 속시원하게 해결했습니다!!
너무 감사드립니다...
잘 해결하셨다니 다행이네요~
저는 대략적인 것들만 작성했는데
이것 말고도 X-UA-Compatible를 검색해서
정보를 많이 찾아보세요~
상세하게 알고 적용하셔야 문제 없으실겁니다.
좋은정보 감사합니다.
댓글 감사합니다~
조금이나마 도움이 되셨으면 좋겠네요~
정보 감사합니다 근데 실제 IE7 브라우저에서 실행을 한다면? IE7에서 문제가 있단 가정하에서요
IETester라는 프로그램 아시나요?
그 프로그램도 버전별로 테스트가 가능하지만
100% 완벽하진 않습니다.
대부분 어느정도까지는 테스트가 가능하지만 완벽하지는 않다는 얘기입니다.
그래서 실제 브라우저에서
테스트는 무조건 해봐야하는게 맞습니다.
아...이것때문에 하루가까이 고민하고 있었는데... 버전 호환을 이렇게 해주는군요...감사합니다! 혼자 끙끙 앓았던게 순식간에 해결됬어요!ㅎㅎ 아 저 하나만 물어볼께요.. 만약에 소스파일에 <meta http-equiv="X-UA-Compatible" content="IE=7"> 이렇게만 정의되어 있다면 그 버전에서만 사이트 이용이 가능한건가요?
아뇨 그렇지는 않아요.
IE7버전 엔진(?) 기준으로 구동되는 것일뿐..
하지만..IE9 사용자가 IE7 에뮬레이터로 돌아가면 답답하겠죠.
죄송한데;;; 저걸 어떻게 수정하죠?ㅠ 뭘로 수정하나요? 인터넷기사를 불러야 하나요?
인터넷 기사요???
아..이건 직접 소스 수정을 하거나 웹 소스 작업을 하는 분들에게 유용한 글입니다.
일반적으로 사용하실때는 아마 도움이 안되실거에요..
무슨 문제인지는 모르겠지만..호환성 보기 버튼을 클릭해보시면 좋겠어요.
정보 정말 잘봤습니다.. 헤메고있던 참에 이거보고 일단 해결되었네요.
웹쪽이 점점 갈수록 이런 현상이 많아지네요.ㅜㅜ
아무래도 버전업이 되면서 변화가 많죠..
이 글 참고해서 모두 해결되었다고 생각하시면 안될 것 같아요.
덕분에 골치아픈 문제를 해결했습니다! ㅎㅎ
정보 고마워요!
해결하셨다니 다행이네요.
하지만 IE 업데이트할 때마다 이 문제로 해결이 안되는 부분들이 점점 생깁니다..
좋은 글 보고 갑니다~~^ ^ 감사해요~
크롬과 익스플로러 사이에서의 호환은 어떻게 해결할 수 있을까요..?
크롬 기준에서는 알맞게 출력되는데..
익스플로러에서는 margin 이나 :hover 등 style 호환이 안 되는 점이 있습니다..
html 1~2개월 전에 시작해서 홈페이지까지 거의 완성해 가고 있는데
딱 이 부분에서 막히네요..
처음부터 익스플로러 기준에서 다시 코딩을 해야하나요..?
IE호환성은 진짜 호환마마 수준이죠.. 버전별로 다 맞춰 줘야하니..
버전별 CSS를 별도로 두거나
CSS 핵을 이용하거나
이런식으로 맞춰주시면 됩니다.
무엇보다 웹표준에 의거 제작하신다면 호환성 부분은 생각보다 큰문제는 없으리라봅니다.