인터넷 익스플로러 호환성
1. 요약
이 기사에서는 Internet Explorer (IE)의 특성에 대해 사용자 정의 HTML 속성 및 태그 처리 ( "특별히 나쁜 속성"으로 이해할 수 있음)에 대해 설명합니다. 응용 프로그램을 IE8 이하와 호환 할 계획이라면 계속 읽을 수 있습니다.
2. 짧은 버전 (간단한 설명)
Angular 앱이 IE에서 작동하도록하려면 다음을 확인하십시오.
1. 필요에 따라 json.stringify를 소개합니다 (IE7 이하이 아래 에이 문제가 필요합니다). JSON2 (https://github.com/douglascrockford/json-js) 또는 json3 (http://bestiejs.github.com/json3/)을 사용할 수 있습니다.
2. <ng : view>와 같은 사용자 정의 태그를 사용하지 마십시오 (<div ng-view>와 같은 속성 버전으로 대체). 여전히 사용하려면 3 점을 참조하십시오.
3. 실제로 사용자 정의 태그를 사용하려면 Old에 사용자 정의 태그를 알리기 위해 다음 단계를 수행해야합니다.
<html xmlns : ng = "http://angularjs.org"> <head> <!-[if lte IE 8]> <cript> document.createelement ( 'ng-include'); 문서화. 문서 .CreateElement ( 'ng-view'); // 선택적으로 CSS Document.createElement ( 'ng : include'); 문서화. document.createelement ( 'ng : view'); </script> <! [endif]-> </head> <hod> ... </body> </html>
주의가 필요한 것은 다음과 같습니다.
XMLS : NG- 네임 스페이스 - 우리가 사용할 모든 사용자 정의 태그마다 네임 스페이스가 필요합니다.
Document.CreateElement ( "Custom Tag Name")-사용자 정의 태그 이름 생성-기존 IE 버전의 문제이므로 IE 판단 주석을 통해 특별히 처리해야합니다 (<!-[LTE IE 8]>… <! [endif]->). 네임 스페이스 또는 비 HTML 기본값이없는 모든 태그에 대해, 이런 종류의 사전 정의 된 경우, 즉 어리석지 않도록해야합니다 (예 : 스타일 없음).
3. 긴 버전 (세부 사항)
IE는 비표준 HTML 태그를 처리하는 데 문제가 있습니다. 여기에는 대략 네임 스페이스 유무에 관계없이 두 가지 유형의 분위기가있을 수 있으며 각 범주에는 고유 한 솔루션이 있습니다.
태그 이름이 "my :"로 시작되면 네임 스페이스로 간주되며 해당 네임 스페이스 정의를 정의해야합니다 (<html xmlns : my = "hoosored">).
태그에 네임 스페이스가없는 경우 (xx로 시작하지만 표준 HTML이 아닌 경우, hobour.createelement ( "tag name")를 통해 선언해야합니다.
사용자 정의 태그의 스타일을 정의 할 계획이라면 XML 네임 스페이스에 관계없이 (실험적으로 XML 네임 스페이스의 상대의 의미가 가능성이 높음을 입증하는 경우에 관계없이 문서화 ( "태그 이름")를 사용해야합니다.
4. 좋은 소식
좋은 소식은이 제한이 요소 이름에만 해당되며 속성 이름에 영향을 미치지 않는다는 것입니다. 따라서 사용자 정의 속성 (<div> my-tag your : tag> </div>)에 대한 특수 처리를 수행 할 필요가 없습니다.
5. 내가 이것을하지 않으면 어떻게됩니까? (이 치료를하지 않으면 어떻게 될까요?!)
비표준 HTML 태그가 있다고 가정 해 봅시다 (동일한 결과는 내 : 태그 또는 마이 태그에 대한 것입니다. 그러나 테스트 후 네임 스페이스 메소드가 그 성가심이 없음을 발견했습니다).
<html> <hod> <mytag> 일부 텍스트 </mytag> </body> </html>
일반적으로 말하면 다음 DOM 구조로 변환됩니다.
#document +-html +- body +- mytag +- #text : 일부 텍스트
우리가 기대하는 것은 Body Element에 Mytag Child 요소가 있고 MyTag에는 텍스트 자식 요소 "일부 텍스트"가 있다는 것입니다.
그러나 IE는이 작업을 수행하지 않습니다 (수정 조치가 취해지면 포함되지 않습니다)!
#document +-html +- body +- mytag +- #text : 일부 text +- /mytag
즉, 신체에는 3 개의 아동 요소가 있습니다.
1. <br/>와 유사한 자체 폐쇄 된 "mytag". 끝에 "/"는 선택 사항이지만 <br> 태그는 하위 요소를 허용하지 않으므로 브라우저는 일부 텍스트 요소를 포함하는 개별 <br> 요소 대신 세 가지 형제 요소로 나눕니다.
2. 텍스트 노드 "일부 텍스트". 이것은 형제 노드가 아니라 Mytag 요소의 자녀 였을 것입니다.
3. 잘못된 자체 폐쇄 태그 "/mytag"는 요소 이름이 "/"문자를 허용하지 않기 때문에 잘못되었다고 말합니다 (끝에서 허용 <br/>). 또한, 폐쇄 요소는 DOM 구조를 개괄하는 경계로만 사용되므로 폐쇄 요소는 DOM의 일부가되어서는 안됩니다 (요소 형태로 표시되지 않음).
6. 커스텀 태그 이름의 CSS 스타일 (커스텀 태그에 대한 CSS 스타일 정의)
CSS 선택기가 사용자 정의 요소에 유효하기를 원한다면 XML 네임 스페이스에 관계없이 문서를 통해 사용자 정의 요소를 사전 정의해야합니다 (실험적으로 XML 네임 스페이스에 대해 걱정할 필요가 없다는 것을 입증하십시오!)
다음은 사용자 정의 태그 스타일 정의의 예입니다.
<! doctype html> <html xmlns : ng = "ng에 필요 : 네임 스페이스"> <head> <title> 즉, 호환성 </title> <!-[if lte ie 8]> <cript> // ng-include를 적절하게 곡식으로 만들어야했습니다 ( 'ng-include'); // CSS 참조 문서를 활성화하려면 필요합니다 .CreateElement ( 'ng : view'); // 댓글이 괜찮습니까? ! </script> <! [endif]-> <tyle> ng/:보기 {display : block; 테두리 : 1px 솔리드 레드; 너비 : 100px; 높이 : 100px; } ng-include {display : 블록; 테두리 : 1px 솔리드 블루; 너비 : 100px; 높이 : 100px; } </style></head><body> <ng:view></ng:view> <ng-include></ng-include></body></html>