IE 브라우저를 보면 아래 사진과 같이 호환성 보기 단추가 있는데, 이 단추는 하위 브라우저에서 제작된 웹 페이지의 호환성을 맞추기 위해 있는 버튼으로 간혹 최신 웹 기술을 적용한 웹 사이트에서는 이 호환성 보기를 활성화할 경우 사이트가 깨져 보일 수 있습니다.
이 경우 클라이언트 PC 에서 호환성보기가 적용되어 있는 경우 임의로 해제할 수 있으나 서버에서 데이터를 보낼 때 IE 의 가장 최고의 렌더링 방식으로 웹 페이지를 출력하라는 데이터를 보낼 수 있습니다.
META TAG 사용하기
HTML 문서 <head> 안에 <meta http-equiv=”X-UA-Compatible” content=”IE=Edge”/> 를 삽입하면 브라우저에서 최대 렌더링으로 웹 페이지를 표시해줍니다.
EX.)
<HTML> <HEAD> <TITLE> 사이트 제목 </TITLE> <meta http-equiv="X-UA-Compatible" content="IE=Edge"/> </HEAD> <BODY> 내용 </BODY> </HTML>
추가적으로 IE=Edge 대신 IE=IE버전 으로 하면 IE 버젼에 맞는 렌더링으로 페이지를 표시해줍니다.
EX.)
<HTML> <HEAD> <TITLE> 사이트 제목 </TITLE> <meta http-equiv="X-UA-Compatible" content="IE=8"/> </HEAD> <BODY> 내용 </BODY> </HTML>
PS. XE (익스프레스 엔진) 같은 경우 레이아웃 헤더 부분에 위 메타태그를 삽입해도 되지 않는 경우가 있습니다만, 이 경우 common/tpl/common_layout.html 파일을 수정해야합니다.
common_layout.html 파일을 열어보면 <head> 부분이 있는데 헤드 사이에 위 소스를 넣으면 됩니다.
EX.)
... 생략
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--@end-->
<html lang="{$lang_type}" xmlns="http://www.w3.org/1999/xhtml"|cond="$db_info->use_html5!='Y'">
<head>
<!-- META -->
<meta charset="UTF-8" cond="$db_info->use_html5=='Y'"/><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" cond="$db_info->use_html5!='Y'" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<!-- TITLE -->
<title>{Context::getBrowserTitle()}</title>
<!-- CSS -->
<block loop="$css_files=>$key,$css_file">
... 이하 생략
위 소스적용 후 보면 아래 사진과 같이 호환성 보기 단추가 없어지고 브라우저가 최대수준으로 렌더링하여 페이지를 보여줍니다.
조건부 주석을 사용할 경우 메타태그를 사용해도 호환성 보기 버튼이 생성이되는데… 이 부분은 어떻게 해야하나요?