インターネットエクスプローラーの互換性
1。概要
この記事では、Internet Explorer(すなわち)カスタム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.本当にカスタムタグを使用したい場合は、古いIEにカスタムタグを知らせるために次の手順を実行する必要があります。
<html xmlns:ng = "http://angularjs.org"> <head> <! - [if lte ie 8]> <script> document.createelement( 'ng-include'); document.createelement( 'ng-pluralize'); document.createelement( 'ng-view'); //オプションでは、これらはCSS document.createElement( 'ng:include'); document.createelement( 'ng:luluralize'); document.createElement( 'ng:view'); </script> <![endif] - > </head> <body> ... </body> </html>
注意が必要なのは次のとおりです。
XMLS:ng -namespace-使用する予定のカスタムタグごとに、名前空間が必要です。
document.CreateElement( "Custom Tag Name") - カスタムタグ名の作成 - これは古いIEバージョンの問題であるため、IE判断コメント(<! - [if lte IE 8]>…<![endif] - >)を通じて特別に処理する必要があります。名前空間または非HTMLデフォルトのないすべてのタグについて、IEが愚かでないようにこの種の事前定義が必要です(例:スタイルなし...)。
3。ロングバージョン(詳細)
IEには、標準以外のHTMLタグの処理に問題があります。これには、おおよそ2種類の雰囲気(名前空間がある場合とない場合)があり、各カテゴリには独自のソリューションがあります。
タグ名が「my:」で始まる場合、それは名前空間と見なされ、対応する名前空間定義を定義する必要があります(<html xmlns:my = "Ingared">)。
タグに名前空間がない場合(xx :)から始まりますが、標準のHTMLではない場合は、document.createelement( "タグ名")を介して宣言する必要があります。
カスタムタグのスタイルを定義する予定がある場合は、XMLネームスペースに関係なく、document.createelement( "タグ名")を使用してカスタマイズする必要があります(XMLネームスペースの相対的な意味が非常に可能性が高いことを実験的に証明します。名前空間でカスタムタグを気にする必要はありません)。
4。良いニュース
良いニュースは、この制限は要素名のみであり、属性名に影響を与えないことです。したがって、カスタムプロパティに対して特別な処理を行う必要はありません(<div> my-tag your:tag> </div>)。
5。これを行わなかったらどうなりますか? (これらの治療をしないとどうなりますか?!)
標準以外のHTMLタグがあるとします(同じ結果は私のタグまたは私のタグにあります。しかし、テスト後、名前空間メソッドにはそのような迷惑がないことがわかりました)。
<html> <body> <mytag>いくつかのテキスト</mytag> </body> </html>
一般的に言えば、それは次のDOM構造に変換されます。
#document +-html + - body +-mytag + - #text:いくつかのテキスト
私たちが期待するのは、ボディ要素にはmyTagの子要素があり、myTagにはテキストチャイルド要素「いくつかのテキスト」があることです。
しかし、IEはこれを行いません(是正措置をとると、含まれません)!
#document +-html + - body +-mytag + - #text:いくつかのテキスト + - /mytag
IEでは、体には3つの子要素があります。
1。<br/>に似た自己閉鎖「mytag」。最後の「/」はオプションですが、<br>タグは子供の要素を許可していないため、ブラウザは、いくつかのテキスト要素を含む個々の<br>要素の代わりに、3つの兄弟要素に分割します。
2。テキストノード「いくつかのテキスト」。これは、兄弟ノードではなく、myTag要素の子であるはずです。
3.誤った自己閉鎖タグ「/mytag」は、要素名が "/"文字を許可していないため、間違っていると言います(最後に許可する必要があります<br/>)。さらに、閉じた要素は、DOM構造の輪郭を描くための境界としてのみ使用されるため、DOMの一部(要素形式で表示されるべきではありません)であってはなりません。
6.カスタムタグ名のCSSスタイル(カスタムタグのCSSスタイル定義)
CSSセレクターをカスタム要素に対して有効にしたい場合、XML名空間に関係なく、カスタム要素をDocument.CreateElement( "要素名")から事前に定義する必要があります(XMLネームスペースについて心配する必要がないことを実験的に証明します??!)
カスタムタグスタイルの定義の例は次のとおりです。
<!doctype html> <html xmlns:ng = "ng:namespace"> <head> <title> ie compatibility </title> <! - [if lte ie 8]> <script> // ng-include parseを適切にdocument.createelement( 'ng-crude'); // cssリファレンスdocument.createelement( 'ng:view')を有効にする必要があります; //コメントアウトは大丈夫ですか? ! </script> <![endif] - > <style> ng/:view {display:block;境界線:1px固体赤;幅:100px;高さ:100px; } ng-include {display:block;ボーダー:1pxソリッドブルー;幅:100px;高さ:100px; } </style> </head> <body> <ng:view> </ng:view> <ng-include> </ng-include> </body> </html>