웹 개발 중에 가장 골치 아픈 부분을 뽑아라 하면 대부분 크로스 브라우징이 될 것이다.
더욱이 골치 아픈 문제는 크로스 브라우징을 해놨는데 호환성 보기 모드로 인해 버전이 강제적으로 바뀌면서 디버깅 했을 때와는 전혀 다른 결과를 보여주는 경우이다.
물론 강제적으로 meta 태그를 페이지 내에 삽입해서 해결 되는 경우도 있지만, 그렇지 않은 경우도 있다. 그런 경우를 해결 방법을 잘 포스팅 해 놓은 블로거가 있어 출처를 밝혀 기록한다.
점점 IE7 사용이 줄고있고 (Windows7 설치시에도 IE8이 기본으로 깔려있다.)
개발시에도 IE7은 고려대상에서 빼는 경우가 많다.
하지만 IE7보다도 더 골치아픈 존재가 있으니, 바로 호환성 보기
호환성 보기를 활성화시키면, 익스플로러 버전과 상관없이 마치 IE7 처럼 랜더링한다.
차라리 IE7하고 100% 동일하면 그나마 낫지만, 호환성보기역시 버전별로 미묘하게 다르게 보이는 부분까지 있으니 환장한다.
개발자 입장에서는 IE7~IE11까지 테스트해보고, 호환성보기까지 확인해봐야 하는 경우가 있으니...
그래서 호환성 보기를 방지하기 위해서, 다음과 같은 메타 태그를 사용한다.
<meta http-equiv="X-UA-Compatible" content="IE=edge">
그러면 브라우저가 지원하는 가장 최신 문서모드로 동작한다.
1 2 3 4 5 6 7 8 9 10 11 12 13 | <!DOCTYPE html> <html lang="ko"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Home</title> </head> <body> <h1> Hello world! </h1> </body> </html> |
이렇게 사라진다.
하지만, 어떤 환경에서는 메타태그가 작동하지 않는 경우도 있는데,
이런식으로 메뉴에 있는 호환성보기를 사용하여, 전체 웹사이트 호환성보기를 하거나, 사이트를 호환성보기에 추가한 경우다.
사실 이 경우도 메타태그만으로 해결되는게 정상이다. 하지만... 음... 잘모르겠다.
메타태그를 추가한뒤에도 문서모드가 IE7로 동작하는 상황을 몇번 본적이 있다.
아무래도 Web Application 내에 포함되어있는 상용솔루션의 영향이 아닐까 싶기도 하고...
어쨌든 이럴경우는 웹서버 또는 WAS에서 Response Header에 세팅하는 방법을 추천한다.
서버 설정에서 추가하는 방식이 가장 확실하고, 페이지 마다 메타태그를 넣어줄 필요도 없으니 더 편리하다.
1. Apache HTTP Server에서 설정시
httpd.conf 파일 수정
1 2 3 4 5 6 | LoadModule headers_module modules/mod_headers.so <IfModule headers_module> Header set X-UA-Compatible:IE=Edge </IfModule> |
2. WebtoB와 JEUS 사용시
WEBMain.xml 파일에 추가함
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <context-group> ... <response-header> <custom-header> <header-field> <field-name>X-UA-Compatible</field-name> <field-value>IE=Edge</field-value> </header-field> </custom-header> </response-header> ... </context-group> |
3. Tomcat 단독으로 사용시, JAVA Servlet Filter를 이용하는 방법
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | public class IEFilter implements Filter { @Override public void init(FilterConfig filterConfig) throws ServletException { } @Override public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException { HttpServletResponse res = (HttpServletResponse) response; res.setHeader("X-UA-Compatible", "IE=Edge"); chain.doFilter(request, response); } @Override public void destroy() { } } |
IE8에서 "호환성보기에서 모든 웹 사이트 표시"를 체크한 상태인데도, 문서모드는 IE7이 아닌 IE8로 적용됨을 확인 할수있다.
'HTML' 카테고리의 다른 글
| 익스플로러8 iframe에서 로딩중 멈춤 현상 (0) | 2015.07.06 |
|---|---|
| chrome - iframe - cache (0) | 2011.02.23 |
| 개발자가 주목할 IE8 (1) | 2009.03.20 |
| Internet Explorer8 의 세션 공유 문제 (0) | 2009.03.18 |
| 웹 속도 향상을 위한 도전 (2) | 2008.11.24 |