Kompatibilitas Internet Explorer
1. Ringkasan
Artikel ini menjelaskan karakteristik Internet Explorer (IE) yang menangani atribut dan tag HTML khusus (yang dapat dipahami sebagai "properti yang buruk secara khusus"). Jika kami berencana untuk membuat aplikasi kompatibel dengan IE8 dan di bawah ini, kami dapat terus membaca.
2. Versi pendek (deskripsi singkat)
Untuk mendapatkan aplikasi Angular kami bekerja di IE, pastikan:
1. Perkenalkan json.stringify sesuai kebutuhan (IE7 atau di bawah membutuhkan hal ini). Kita dapat menggunakan JSON2 (https://github.com/douglascrockford/json-js) atau json3 (http://bestiej.github.com/json3/).
2. Jangan gunakan tag khusus seperti <ng: view> (ganti dengan versi atribut, seperti <v Ng-view>). Jika Anda masih ingin menggunakannya, silakan lihat poin 3.
3. Jika Anda benar -benar ingin menggunakan tag khusus, Anda harus melakukan langkah -langkah berikut untuk memberi tahu Old IE Tahu Tag Kustom Anda.
<html xmlns: ng = "http://angularjs.org"> <head> <!-[jika LTE IE 8]> <script> document.createElement ('ng-include'); document.createelement ('ng-pluralize'); document.createelement ('ng-view'); // Opsional ini untuk dokumen CSS.createElement ('ng: include'); document.createelement ('ng: pluralisasi'); document.createElement ('ng: view'); </script> <! [endif]-> </head> <body> ... </body> </html>Yang perlu diperhatikan adalah:
XMLS: NG - Namespace - Untuk setiap tag khusus yang kami rencanakan untuk digunakan, perlu ada namespace.
Document.createElement ("Nama Tag Kustom")-Pembuatan Nama Tag Kustom-Karena ini adalah masalah dengan versi IE lama, kita perlu menanganinya secara khusus melalui komentar penilaian IE (<!-[jika LTE IE 8]> ... <! [Endif]->). Untuk setiap tag tanpa namespace atau non-HTML default, diperlukan jenis yang telah ditentukan ini sehingga IE tidak akan bodoh (mis. Tidak ada gaya ...).
3. Versi Panjang (Detail)
IE memiliki masalah dengan menangani tag HTML non-standar. Ini secara kasar dapat memiliki dua jenis atmosfer (dengan dan tanpa ruang nama), dan setiap kategori memiliki solusi sendiri.
Jika nama tag dimulai dengan "my:", itu akan dianggap sebagai namespace, dan definisi namespace yang sesuai harus ditentukan (<html xmlns: my = "abaikan">).
Jika tag tidak memiliki namespace (dimulai dengan xx :) tetapi bukan html standar, itu perlu dinyatakan melalui dokumen.createElement ("nama tag").
Jika kami berencana untuk mendefinisikan gaya untuk tag khusus, kami harus menggunakan dokumen.
4. Kabar baiknya
Berita baiknya adalah bahwa pembatasan ini hanya untuk nama elemen dan tidak berpengaruh pada nama atribut. Oleh karena itu, tidak perlu melakukan pemrosesan khusus untuk properti kustom (<div> my-tag Anda: tag> </div>).
5. Apa yang terjadi jika saya gagal melakukan ini? (Apa yang akan terjadi jika Anda tidak melakukan perawatan ini?!)
Misalkan kita memiliki tag HTML non-standar (hasil yang sama untuk saya: tag atau saya-tag. Tetapi setelah pengujian, kami menemukan bahwa metode namespace tidak akan memiliki gangguan seperti itu).
<html> <body> <mytag> Beberapa teks </ytag> </body> </html>
Secara umum, itu akan dikonversi ke struktur DOM berikut:
#document +- html +- body +- mytag +- #text: beberapa teks
Yang kami harapkan adalah bahwa elemen tubuh memiliki elemen anak mytag, dan mytag memiliki elemen anak teks "beberapa teks".
Tetapi IE tidak melakukan ini (jika tindakan korektif diambil, itu tidak akan dimasukkan)!
#document +- html +- body +- mytag +- #text: beberapa teks +- /mytag
Di IE, tubuh akan memiliki 3 elemen anak:
1. "Mytag" yang ditutup sendiri, mirip dengan <br/>. "/" Pada akhirnya adalah opsional, tetapi tag <br> tidak mengizinkan elemen anak, sehingga browser membaginya menjadi tiga elemen saudara, bukan elemen <br> individu yang mengandung beberapa elemen teks.
2. Node teks "beberapa teks". Ini seharusnya menjadi anak dari elemen mytag, bukan node saudara kandungnya.
3. Tag penutup-diri yang salah "/mytag" mengatakan itu salah karena nama elemen tidak mengizinkan karakter "/" (harus diizinkan pada akhirnya <br/>). Selain itu, elemen tertutup tidak boleh menjadi bagian dari DOM (tidak boleh muncul dalam bentuk elemen) karena digunakan hanya sebagai batas untuk menguraikan struktur DOM.
6. CSS Styleing Nama Tag Kustom (Definisi Gaya CSS Untuk Tag Kustom)
Jika Anda ingin pemilih CSS valid untuk elemen khusus, maka elemen khusus harus ditentukan sebelumnya melalui dokumen.
Berikut adalah contoh definisi gaya tag khusus:
<! Doctype html> <html xmlns: ng = "Dibutuhkan untuk ng: namespace"> <head> <title> yaitu kompatibilitas </ title> <!-[jika lte IE 8]> <script> // perlu membuat ng-include parse dengan baik dokumen.createelement ('NG-ininclude'); // Diperlukan untuk mengaktifkan dokumen referensi CSS.createElement ('ng: view'); // komentar keluar tidak? Lai </script> <! [endif]-> <tyle> ng/: view {display: block; Perbatasan: 1px solid red; Lebar: 100px; Tinggi: 100px; } ng-include {display: block; Perbatasan: 1px Solid Blue; Lebar: 100px; Tinggi: 100px; } </tyle> </head> <body> <ng: view> </ng: view> <ng-clude> </n ng-include> </body> </html>