[익스플로어] 렌더링 엔진 설정

2017. 12. 23. 23:59

[Internet Explorer] 호환성 보기, 렌더링 엔진 설정

html코드를

<!DOCTYPE html> 
<html> 
  <head> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

이렇게 적는 것과

<!DOCTYPE html> 
<html> 
  <head> 
     <!-- 메타태그 없이 작성 하는 것 -->

메타태그 없이 작성하는것은 어떤 차이가 있을까?

작성하는 페이지가 IE8이나 IE9를 호환하는 페이지라면 메타태그를 작성하는게 좋다.

최신 브라우져만 지원하는 페이지는 작성을 안하는 것이 좋다.

X-UA-Compatible 메타 태그를 사용하면 IE의 렌더링 엔진을 선책할 수 있다.

MS 문서에 따르면 head 태그 중에서도 가장 먼저 작성하는것이 좋다고 한다.

메타태그에는 다음과 같은 옵션을 사용할 수 있다.

옵션	설명
IE=edge	IE가 사용할 수 있는 가장 높은 버전의 엔진을 사용합니다. IE9라면 IE9엔진을 사용합니다.
IE=11	HTML5, CSS3을 포함한 가장 높은 수준의 산업표준을 지원 한다.
IE=EmulateIE11	directive 를 사용하여 렌더링버전을 선택할 수 있게 합니다. directive가 없는 경우는 IE11 엔진을 사용하고 있는 경우는 IE5엔진을 사용합니다.
IE=10	IE=11과 같습니다.
IE=EmulateIE10	IE=EmulateIE11 과 같습니다.
IE=9	HTML5, CSS3, SVG 등을 지원합니다. (CSS3 애니메이션은 지원하지 않습니다.)
IE=EmulateIE9	directive 를 사용하여 렌더링버전을 선택할 수 있게 합니다.
IE=8	CSS3을 제한적으로 표시 할 수 있다.
IE=EmulateIE8	directive 를 사용하여 렌더링버전을 선택할 수 있게 합니다.
IE=7	IE7에서 컨텐츠 표시방식과 비슷하게 렌더링 한다.
IE=EmulateIE7	directive 를 사용하여 렌더링버전을 선택할 수 있게 합니다.
IE=5	IE5에서 컨텐츠 표시 방식과 비슷하게 렌더링 한다.

위와 같은 옵션들을 설정하여 IE버전별 페이지 상태도 확인 할 수 있다.

<!DOCTYPE html> 
<html> 
  <head> 
     <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">

chrome모드도 함께 사용할 수 있다.

단 IE에 Google Chrome 프레임이 설치되어 있어야 한다.

PREV 1 NEXT