Internet Explorer -Kompatibilität
1. Zusammenfassung
Dieser Artikel beschreibt die Merkmale von Internet Explorer (dh), die benutzerdefinierte HTML -Attribute und -Tags bearbeiten (die als "speziell schlechte Eigenschaften" verstanden werden können). Wenn wir vorhaben, die Anwendung mit IE8 und unten kompatibel zu machen, können wir weiter lesen.
2. Kurzversion (kurze Beschreibung)
Um unsere Angular -App zum IE zu bearbeiten, stellen Sie sicher:
1. Einführung jSON.Stringify bei Bedarf (dh 7 oder darunter erfordert dieses Ding). Wir können JSON2 (https://github.com/douglascrockford/json-js) oder JSON3 (http://bestiejs.github.com/json3/) verwenden.
2. Verwenden Sie keine benutzerdefinierten Tags wie <ng: Ansicht> (ersetzen Sie Attributversionen wie <div ng-view>). Wenn Sie es noch verwenden möchten, lesen Sie bitte Punkt 3.
3. Wenn Sie wirklich benutzerdefinierte Tags verwenden möchten, müssen Sie die folgenden Schritte ausführen, um alte dh Ihre benutzerdefinierten Tags zu informieren.
<html xmlns: ng = "http://angularjs.org"> <head> <!-[wenn lte ie 8] <script> document.createelement ('ng-include'); document.createelement ('ng-pluralize'); document.createelement ('ng-view'); // optional diese für CSS -Dokument.Createelement ('ng: include'); document.createelement ('ng: pluralize'); document.createelement ('ng: view'); </script> <! [endif]-> </head> <body> ... </body> </html>Was Aufmerksamkeit braucht ist:
XMLS: NG - Namespace - Für jedes benutzerdefinierte Tag, das wir verwenden möchten, muss es einen Namespace geben.
document.createelement ("benutzerdefinierter Tag-Name")-Erstellung des benutzerdefinierten Tag-Namens-Da dies ein Problem mit der alten IE-Version ist, müssen wir ihn speziell mit IE-Urteils-Kommentaren umgehen (<!-[Wenn LTE iE 8]>… <! [Endif]->). Für jeden Tag ohne Namespace oder Nicht-HTML-Standard ist diese Art von vordefinierter Form erforderlich, damit der IE nicht dumm ist (z. B. kein Stil ...).
3.. Lange Version (Details)
IE hat Probleme beim Umgang mit nicht standardmäßigen HTML-Tags. Dies kann ungefähr zwei Arten von Atmosphäre (mit und ohne Namespaces) haben, und jede Kategorie hat eine eigene Lösung.
Wenn der Tag -Name mit "my:" beginnt, wird er als Namespace angesehen, und eine entsprechende Namespace -Definition muss definiert werden (<html xmlns: my = "ignored">).
Wenn das Tag keinen Namespace hat (beginnend mit xx :), aber kein Standard -HTML ist, muss er über das document.createelement ("Tag -Name") deklariert werden.
Wenn wir vorhaben, Stile für benutzerdefinierte Tags zu definieren, müssen wir document.createelement ("Tag -Name") zum Anpassen des XML -Namespace verwenden (experimentell beweist die Bedeutung des Verwandten des XML -Namespace sehr wahrscheinlich: Keine Notwendigkeit, benutzerdefinierte Tags mit Namespace zu sorgen).
4. Die guten Nachrichten
Die gute Nachricht ist, dass diese Einschränkung nur für Elementnamen erfolgt und keine Auswirkungen auf Attributnamen hat. Daher müssen keine spezielle Verarbeitung für benutzerdefinierte Eigenschaften durchgeführt werden (<Div> my my-Tag Ihr Tag> </div>).
5. Was passiert, wenn ich das nicht mache? (Was wird passieren, wenn Sie diese Behandlungen nicht ausführen?!)
Angenommen, wir haben ein nicht standardmäßiges HTML-Tag (das gleiche Ergebnis ist für mein Tag oder mein Tag. Nach dem Test haben wir jedoch festgestellt, dass die Namespace-Methode nicht so ärgerlich ist).
<html> <body> <MyTag> Ein Text </mytag> </body> </html>
Im Allgemeinen wird es in die folgende Dom -Struktur umgewandelt:
#Dokument +- HTML +- Body +- MyTag +- #Text: Einige Text
Wir erwarten, dass das Körperelement ein Mytag -Kinderelement hat und der Mytag ein textkindliches Element "etwas Text" hat.
Aber der IE tut dies nicht (wenn Korrekturmaßnahmen ergriffen werden, wird es nicht enthalten)!
#Document +- HTML +- Body +- MyTag +- #Text: Ein Text +- /MyTag
In IE wird der Körper 3 Kinderelemente haben:
1. Ein selbstbeschuldigter "Mytag", ähnlich wie <br/>. Das "/" am Ende ist optional, aber das <br> Tag zulässt keine untergeordneten Elemente, sodass der Browser es in drei Geschwisterelemente unterteilt, anstatt der individuellen Elemente, die einige Textelemente enthalten.
2. Ein Textknoten "Ein Text". Dies sollte ein Kind des Mytag -Elements sein, nicht des Geschwisterknotens.
3. Ein falsches Selbstklassen-Tag "/mytag" sagt, dass es falsch ist, weil der Elementname das Zeichen "/" nicht zulässt (es sollte am Ende <br/> zulässig sein). Darüber hinaus sollte das geschlossene Element nicht Teil des DOM sein (es sollte nicht in Elementform erscheinen), da es nur als Grenze verwendet wird, um die DOM -Struktur zu skizzieren.
6. CSS -Styleing von benutzerdefinierten Tag -Namen (CSS -Stildefinition für benutzerdefinierte Tags)
Wenn Sie möchten, dass der CSS -Selektor für benutzerdefinierte Elemente gültig ist, müssen die benutzerdefinierten Elemente unabhängig von XML -Namespace ("Elementname") vordefiniert werden (experimentell beweist, dass sich hier nicht um XML -Namespace sorgen muss?!)
Hier ist ein Beispiel für die Definition des benutzerdefinierten Tag -Stils:
<! DocType html> <html xmlns: ng = "benötigt für ng: Namespace"> <kopf> <title> IE-Kompatibilität </title> <!-[wenn lte dh 8] <script> // musste, um NG-include-Parse ordnungsgemäß zu dokumentieren. // Um das CSS -Referenzdokument zu aktivieren. ! </script> <! [endif]-> <style> ng/: view {display: block; Grenze: 1px solide Rot; Breite: 100px; Höhe: 100px; } ng-include {display: block; Grenze: 1px fest blau; Breite: 100px; Höhe: 100px; } </style> </head> <body> <ng: view> </ng: view> <ng-include> </ng-include> </body> </html>