IE9는 더 이상 document.createElement와 이전 버전과 호환되지 않습니다. - javascript 팁

오늘 웹사이트에서 IE9와 Chrome의 페이지 기능이 실제로 다르다는 것을 발견했습니다. 그래서 IE9에서 콘솔을 열고 fiddler로 추적해 보니 js 오류가 많이 있는 것으로 나타났습니다. 코드에는 다음과 같은 문장이 있었습니다.

if(ie){
  var iframe = document.createElement('<iframe src="http://www.jb51.net"></iframe>');
}

예, 문제는 여기에 있습니다. DOM 예외: INVALID_CHARACTER_ERR (5)
IE9에서는 일부 메소드가 w3c 표준에 더 가까워졌고 여기 document.createElement 메소드를 포함하여 Firefox, Chrome 브라우저 등과 일치합니다.
따라서 여기의 코드를 다음과 같이 변경해야 합니다.

if(ie && version < 9) {
  var iframe = document.createElement('<iframe src="http://www.jb51.net"></iframe>');
} else {
  var iframe = document.createElement('iframe');
  iframe.setAttribute('src','http://www.jb51.net');
}

그러나 이 메타 태그가 페이지에 추가되면 IE9의 문서 모드가 강제로 IE7로 다운그레이드될 수 있습니다.

ac1556b0d4238e1d272cf8fa18f10874

이렇게 하면 이 BUG를 피할 수 있지만 페이지에 처리할 수 없는 특별한 내용이 없다면 그런 힘을 추가하지 않는 것이 좋습니다. 일반 모드에서 제어할 수 없는 현상이 발생할 수 있기 때문입니다.

여기에는 제가 기억하는 다양한 IE 버전의 차이점도 나열하겠습니다.

1, IE6
a. PNG 반투명 이미지는 지원되지 않으며 필터를 통해서만 얻을 수 있습니다
b. CSS의 최대 너비, 최대 높이, 최소 너비 및 최소 높이는 지원되지 않습니다.
말할 필요도 없이 다른 모든 것은 엉망이지만 프로젝트에서는 여전히 호환성을 구현해야 합니다!

2, IE7
a. png 반투명 이미지 지원 문제 해결
b. CSS의 최대 너비, 최대 높이, 최소 너비 및 최소 높이 지원 문제를 해결했습니다.
c. CSS float로 인한 버그를 해결했습니다
d. 향상된 CSS 선택기. 예를 들어 div 노드는 :hover 의사 클래스
도 지원합니다. IE6의 많은 문제를 해결하지만 IE7은 항상 중간 제품이며 혼란스러운 스타일 문제가 종종 있습니다. 일반적인 상황에서는 Zoom:1이 만능입니다

3.IE8
a. CSS2.1 선택기를 완벽하게 지원하고, w3c와 일치하며, 점진적으로 표준화합니다
b. CSS에서 표현식 지원을 제거하고 -ms-
라는 개인 접두사를 추가했습니다. c와 js의 경우 localStorage가 지원됩니다
d. 버전이 많기 때문에 UA 호환 모드인 X-UA-Compatible

이 개발되었습니다.

4, IE9
a, CSS3 지원(일부)
b. html5 지원(일부)
그러나 Javascript 엔진은 차크라로 대체되었으며 성능이 매우 좋으며 일부 DOM 작업이 더 이상 이전 버전과 호환되지 않는다는 점도 반영합니다. 현재 IE9은 w3c 표준화를 달성했습니다.

5, IE10
a. CSS3 및 html5에 대한 강력한 지원
b. 더 많은 -ms-private 속성(더 많은 비공개 속성을 사용하면 다시 길을 잃게 될까요? 물론 여기서는 Chrome과 Firefox가 선두를 차지했습니다... 모든 종류의 비공개 속성!!!)

요컨대 프런트엔드 개발자로서 우리는 변화를 따르고 이러한 변화에 적응해야 합니다.