توافق Internet Explorer
1. ملخص
تصف هذه المقالة خصائص Internet Explorer (IE) التي تتعامل مع سمات وعلامات HTML المخصصة (والتي يمكن فهمها على أنها "خصائص سيئة بشكل خاص"). إذا كنا نخطط لجعل التطبيق متوافقًا مع IE8 وأقل ، فيمكننا الاستمرار في القراءة.
2. نسخة قصيرة (وصف موجز)
للحصول على تطبيقنا الزاوي للعمل على 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. إذا كنت ترغب حقًا في استخدام علامات مخصصة ، فيجب عليك القيام بالخطوات التالية لإعلام علاماتك المخصصة القديمة.
<html xmlns: ng = "http://angularjs.org"> <head> <!-[if lte ie 8]> <script> document.createlement ('ng-include') ؛ document.createElement ('ng-pluralize') ؛ document.createElement ('ng-view') ؛ // اختياريًا هذه لـ css document.createElement ('ng: include') ؛ document.createElement ('ng: priluralize') ؛ document.createElement ('ng: view') ؛ </script> <!ما يحتاج إلى الاهتمام هو:
XMLS: NG - مساحة الاسم - لكل علامة مخصصة نخطط لاستخدامها ، يجب أن يكون هناك مساحة اسم.
document.createlement ("اسم العلامة المخصصة")-إنشاء اسم العلامة المخصص-لأن هذه مشكلة في إصدار IE القديم ، نحتاج إلى التعامل معها بشكل خاص من خلال تعليقات الحكم (<!-[إذا كان lte ie 8]> ... <! [endif]->). لكل علامة بدون مساحة اسم أو افتراضي غير HTML ، مطلوب هذا النوع من المحددة مسبقًا بحيث لا يكون IE غبيًا (على سبيل المثال لا نمط ...).
3. الإصدار الطويل (التفاصيل)
IE لديه مشاكل في التعامل مع علامات HTML غير القياسية. يمكن أن يحتوي هذا على نوعين من الجو تقريبًا (مع ودون مساحات الأسماء) ، وكل فئة لها حلها الخاص.
إذا بدأ اسم العلامة بـ "my:" ، فسيتم اعتباره مساحة الاسم ، ويجب تعريف تعريف مساحة الاسم المقابلة (<html xmlns: my = "تجاهل">).
إذا كانت العلامة لا تحتوي على مساحة اسم (بدءًا من xx :) ولكنها ليست HTML قياسية ، فيجب إعلانها من خلال المستند. createlement ("اسم العلامة").
إذا كنا نخطط لتحديد الأنماط للحصول على علامات مخصصة ، فيجب علينا استخدام المستند.
4. الأخبار السارة
والخبر السار هو أن هذا التقييد مخصص فقط لأسماء العناصر وليس له أي تأثير على أسماء السمات. لذلك ، ليست هناك حاجة للقيام بمعالجة خاصة للخصائص المخصصة (<viv> my-tag الخاص بك: علامة> </div>).
5. ماذا يحدث إذا فشلت في القيام بذلك؟ (ماذا سيحدث إذا لم تقم بهذه العلاجات؟!)
لنفترض أن لدينا علامة HTML غير القياسية (نفس النتيجة هي: العلامة أو العلامة الخاصة بي. ولكن بعد الاختبار ، وجدنا أن طريقة مساحة الاسم لن يكون لها مثل هذا الإزعاج).
<html> <body> <mytag> بعض النص </mytag> </body> </html>
بشكل عام ، سيتم تحويله إلى بنية DOM التالية:
#Document +- HTML +- Body +- MyTag +- #Text: بعض النص
ما نتوقعه هو أن عنصر الجسم لديه عنصر طفل mytag ، وأن MyTag لديه عنصر نصي طفل "بعض النص".
لكن أي لا تفعل ذلك (إذا تم اتخاذ تدابير تصحيحية ، فلن يتم تضمينها)!
#document +- html +- body +- mytag +- #text: بعض النص +- /mytag
في IE ، سيكون للجسم 3 عناصر طفل:
1. تكون "/" في النهاية اختياريًا ، لكن العلامة <br> لا تسمح لأي عناصر طفل ، وبالتالي فإن المتصفح يقسمها إلى ثلاثة عناصر شقيق ، بدلاً من العناصر الفرد <br> التي تحتوي على بعض عناصر النص.
2. عقدة نصية "بعض النص". كان ينبغي أن يكون هذا طفلًا لعنصر mytag ، وليس عقدة شقيقه.
3. تقول علامة الإسقاط غير الصحيحة "/mytag" إنها خاطئة لأن اسم العنصر لا يسمح بحرف "/" (يجب السماح به في النهاية <br/>). علاوة على ذلك ، يجب ألا يكون العنصر المغلق جزءًا من DOM (يجب ألا يظهر في شكل عنصر) لأنه يستخدم فقط كحدود لتحديد بنية DOM.
6. نمط CSS لأسماء العلامات المخصصة (تعريف نمط CSS للعلامات المخصصة)
إذا كنت تريد أن يكون محدد CSS صالحًا للعناصر المخصصة ، فيجب تحديد العناصر المخصصة مسبقًا من خلال المستند. createlement ("اسم العنصر") ، بغض النظر عن مساحة اسم XML (يثبت تجريبياً أنه لا توجد حاجة للقلق بشأن مساحة اسم XML هنا؟!)
فيما يلي مثال على تعريف نمط العلامة المخصص:
<! doctype html> <html xmlns: ng = "مطلوب لـ ng: مساحة الاسم"> <head> <title> أي توافق </title> <!-[if lte ie 8]> <script> // اللازمة لجعل ng-include docateelement بشكل صحيح ('ng-include') ؛ // مطلوب لتمكين المستند المرجعي CSS. ! </script> <! الحدود: 1 بكسل صلب أحمر. العرض: 100px ؛ الارتفاع: 100px ؛ } ng-in-tock {display: block ؛ الحدود: 1 بكسل الأزرق الصلب. العرض: 100px ؛ الارتفاع: 100px ؛ } </style> </head> <body> <ng: view> </g: view> <ng-in-till> </g-in-till> </body> </html>