InternetExpler6~11 호환성 유지 대책 노트

날과 씨

InternetExplorer를 6에서 11로 실행하기 위한 노트
PHP에서는 Smarty 등 템플릿 엔진을 사용하면 UA의 분기로 대응할 수 있지만 노동시간 문제 등으로 사용할 수 없어 기존 6개 사이트도 8.1의 11에서 운영할 수 있도록 대응을 조사했다.

JavaScript 호환성

InternetExplorer의 호환성을 유지하기 위해서는 호환성 모델에 대한 대책이 필요하다.
사이트가 어떤 호환 모드로 이동하는지는 사이트에 따라 다르지만 F12의 개발자 도구에서 거리 측정 모드를 결합시켜 컨트롤러에 오류가 있는지 확인한다.
경고는 무시할 수 있지만 오류가 있으면 호환 모드에서 오류가 어디에 있는지 확인하십시오.
※ InternetExplorer 11의 엣지는 최신 렌더링 모드를 말합니다.

HTML 호환을 통해 지정

HTML 파일에서 호환 모드를 지정할 때 헤더의 메타 태그를 통해 지정합니다.
이 지정은 CS, JavaScript를 불러오기 전에 수행됩니다.

<meta http-equiv="X-UA-Compatible" content="IE=5"/>

사이트 전체의 적응

전체 사이트에 적응하려면 Apache의 conf 파일에 기술된 방법과 디렉터리의 적응 위치를 공개하십시오.htaccess의 숨겨진 파일을 설치하는 방법이 있습니다.htaccess는 공개 디렉터리의 기초에 적응하기 때문에 유연하지만 이후 디버깅을 할 때 이해하기 어려워지기 때문에 conf에 쓰면 이해하기 쉽다.
.htaccess
/opt/lampp/etc/extra/httpd-xampp.conf
.htaccess

# IE5 Rendering mode
<IfModule mod_headers.c>
  Header set X-UA-Compatible "IE=5"
  Header set X-UA-TextLayoutMetrics gdi
  # mod_headers can't match by content-type, but we don't want to send this header on everything
  <FilesMatch "\.(appcache|crx|css|eot|gif|htc|ico|jpe?g|js|m4a|m4v|manifest|mp4|oex|oga|ogg|ogv|otf|pdf|png|safariextz|svg|svgz|ttf|vcf|webm|webp|woff|xml|xpi)$">
    Header unset X-UA-Compatible
  </FilesMatch>
</IfModule>

X-UA-Compatible "IE=5"
렌더링 모드를 호환 디스플레이로 설정합니다.
X-UA-TextLayoutMetrics gdi
글꼴의 렌더링 모드와 자연 양도를 호환합니다.
FilesMatch
), php 호환 모드에만 적용됩니다.
CSS는 템플릿을 통해) php의 호환 모드에만 적용됩니다.

자연 측정 사용 안 함

기본적으로 Windows 8.1 Update의 Internet Explorer 11은 자연 치수를 사용합니다.
브라우저는 텍스트와 픽셀 사이의 간격을 임의로 조정하여 텍스트 상자의 레이아웃을 약간 크게 표시할 수 있다.과거 IE 너비로 복원하려면 Windows 그래픽 장치 인터페이스 (GDI) 를 사용해야 하기 때문에 자연 양도를 비활성화해야 한다.(잘못된 자연 양도에도 불구하고 브라우저의 제어 자체는 변경할 수 없기 때문에 레이아웃이 무너질 때가 있다.)
• HTTP 헤더에 X-UA-TextLayoutMetrics: gdi를 추가합니다.
• 또는 메타태그에 다음과 같은 내용을 추가합니다.

<meta http-equiv="X-UA-TextLayoutMetrics" content="gdi" />

CSS 호환성

호환 모드에서 JavaScript는 재현성이 높지만 CSS에서는 페이지마다 다릅니다.
F12의 콘솔처럼 오류가 발생하지 않기 때문에 CSS는 페이지마다 목시 검사를 해야 합니다.

IE11에서 흔히 볼 수 있는 레이아웃 변형에는 다음과 같은 몇 가지가 있다.

IE 11 레이아웃 충돌 지점
수정 방법
코드
책상 자체의 편차
고정 테이블
TABLE 태그 요소 추가 스타일 = "table-layout:fixed;"추기
줄 바꿈은 작동하지 않습니다.
되돌리지 마라
span 탭을 하위 요소로 추가하고 스타일을 지정합니다

버튼 제어의 비활성 디스플레이(IE10 이후)

IE 10 이후 버튼 컨트롤의 비활성 디스플레이로 인해 disabled의 색상이 달라집니다.
대책으로 CSS에서 버튼이 활성화되지 않을 때의 색상을 지정합니다.이 스타일은 IE 10에서 가져온 것으로, 이전 IE에는 스타일이 반영되지 않습니다.

<button disabled="" styleClass="btnColor">印刷</button>

input.btnColor[disabled]
    { color:#dcdcdc; }

모드 창의 크기가 이상해짐(IE10 이후)

IE 컨트롤은 모드 창의 크기를 변경할 수 있습니다.
IE 10 이후에는 창을 열고 (팝업) 대응할 수 있지만, 팝업 블록이 실행되면 잠시 차단됩니다.
IE6～9

var url = "hoge.php";
var name = "";
var feature = "dialogWidth:700px;dialogHeight:628px;status:no;help:no;center:1";
var returnValue = window.showModalDialog(url, name, feature);

IE 10~미발표 버전 IE

var url = "hoge.php";
var name = "";
var feature = "width=700, height=628, menubar=no, toolbar=no, scrollbars=yes, resizable=no, status=no";
var returnValue = window.open(url, name, feature);

CSS 해커, 조건부 의견

또한 CSS 해커와 조건부 리뷰 등을 활용해 IE당 차이를 줄일 수 있다.
CSS 해커는 문법적으로 잘못된 것이므로 가능하면 정부에서 지원하는 조건부 논평을 추천합니다.
CSS 해커

body {
　color: red; /* 通常 */
　*color: red; /* IE7以下 */
　/color: red; /* IE6・IE7 */
　_color: red; /* IE6 */
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
body {
　color: red;
}
}/* IE10 */

조건부 주석 1

<!--[if lt IE 10]>
<style type="text/css">
selector {
  background-color: blue;   /* IE9以下 */
}
</style>
<![endif]-->

<!--[if IE 6]>
<style type="text/css">
selector {
  background-color: green;  /* IE6のみ */
}
</style>
<![endif]-->

조건부 주석2

<link rel="stylesheet" href="/css/common.css">
<!-- ↓IE8以下 -->
<!--[if lt IE 9]>
<link rel="stylesheet" href="/css/common_ltie9.css">
<![endif]-->

input size 버전별 표시 방법(Windows 8.1 이후)

InternetExplorer의 각 버전은 OS를 포함하고 다른 브라우저도 input 상자의size를 지정하지만 사실 모든 브라우저는 OS의 크기가 다소 다르다.Windows 7까지의 크기 및 Windows 8입니다.1의 크기는 Windows8입니다.1 브라우저에서 보면 커집니다.이것은 디자인의 변형을 초래할 수 있다.눈으로 확인해야 한다.붕괴가 있을 경우 CSS 등의 대안이 있거나 UA가 size를 나누는 대응이 있다.

<input name="hoge" value="" class=”insert-width”>

input.insert-width{ width: 80%; }

보호 모드

Internet Explorer 7 이후와 Windows Vista 이후의 조합에서 사용할 수 있습니다.Windows XP는 사용할 수 없는 기능으로, IE에서 실행되는 프로세스 및 확장 기능에 대한 액세스 권한을 제한하는 보안 기능입니다.방문지(지역)에 따라 안전 설정 등을 전환할 수 있으며,'인터넷','로컬 내부망','신뢰할 수 있는 사이트','제한된 사이트'등 4개 구역으로 구분된다.바이러스와 악성 소프트웨어 대책의 기능이지만, 이 때문에 오래된 확장 기능은 로컬 캐시를 읽거나 쓸 수 없으며, 확장 기능에서 오류를 되돌려주는 경우가 있다.콘솔에 오류가 없으면 JavaScript는 정상적이지만 확장 기능이 있는 경우 매크로를 로드하고 반환 값을 받는 페이지의 디버깅에 오류가 발생합니다.원인을 구분하기 어려우므로 특정 확장 기능을 사용하는 서비스는 신뢰할 수 있는 페이지에 등록하고 보호 모델을 구분해야 한다.

총결산

IE 관련 정보가 워낙 방대하기 때문에 조금이라도 접촉하는 정도만 소개했다.
IE가 저지른 죄가 무거워서.
Internet Explorer – 다운로드, IEAK, 문제 해결 |TechNet