ความเข้ากันได้ของ Internet Explorer
1. สรุป
บทความนี้อธิบายถึงลักษณะของ Internet Explorer (เช่น) การจัดการแอตทริบิวต์ HTML ที่กำหนดเองและแท็ก (ซึ่งสามารถเข้าใจได้ว่าเป็น "คุณสมบัติที่ไม่ดีเป็นพิเศษ") หากเราวางแผนที่จะทำให้แอปพลิเคชันเข้ากันได้กับ IE8 และต่ำกว่าเราสามารถอ่านต่อไปได้
2. เวอร์ชันสั้น ๆ (คำอธิบายสั้น ๆ )
เพื่อให้แอพเชิงมุมของเราทำงานบน IE ให้แน่ใจว่า:
1. แนะนำ json.stringify ตามต้องการ (เช่น 7 หรือต่ำกว่าต้องใช้สิ่งนี้) เราสามารถใช้ JSON2 (https://github.com/douglascrockford/json-js) หรือ json3 (http://bestiejs.github.com/json3/)
2. อย่าใช้แท็กที่กำหนดเองเช่น <ng: ดู> (แทนที่ด้วยเวอร์ชันแอตทริบิวต์เช่น <div ng-view>) หากคุณยังต้องการใช้โปรดดูจุดที่ 3
3. หากคุณต้องการใช้แท็กที่กำหนดเองจริงๆคุณต้องทำตามขั้นตอนต่อไปนี้เพื่อให้เก่าคือรู้แท็กที่กำหนดเองของคุณ
<html xmlns: ng = "http://angularjs.org"> <head> <!-[ถ้า lte ie 8]> <script> document.createElement ('ng-include'); document.createElement ('ng-pluralize'); document.createElement ('ng-view'); // เป็นทางเลือกเหล่านี้สำหรับเอกสาร CSS CreateElement ('NG: รวม'); document.createElement ('ng: pluralize'); document.createElement ('ng: view'); </script> <! [endif]-> </head> <body> ... </body> </html>สิ่งที่ต้องการความสนใจคือ:
XMLS: NG - Namespace - สำหรับทุกแท็กที่กำหนดเองที่เราวางแผนจะใช้จะต้องมีเนมสเปซ
document.createElement ("ชื่อแท็กที่กำหนดเอง")-การสร้างชื่อแท็กที่กำหนดเอง-เนื่องจากนี่เป็นปัญหาของเวอร์ชัน IE เก่าเราต้องจัดการกับมันเป็นพิเศษผ่านความคิดเห็นของการตัดสิน (<!-[ถ้า lte ie 8]> ... <! [endif]->) สำหรับทุกแท็กที่ไม่มีค่าเริ่มต้น namespace หรือ non-HTML จำเป็นต้องมีการกำหนดไว้ล่วงหน้าประเภทนี้เพื่อไม่ให้โง่ (เช่นไม่มีสไตล์ ... )
3. เวอร์ชันยาว (รายละเอียด)
IE มีปัญหาในการจัดการแท็ก HTML ที่ไม่ได้มาตรฐาน สิ่งนี้สามารถมีบรรยากาศสองประเภท (มีและไม่มีเนมสเปซ) และแต่ละหมวดหมู่มีวิธีแก้ปัญหาของตัวเอง
หากชื่อแท็กเริ่มต้นด้วย "My:" มันจะถูกมองว่าเป็นเนมสเปซและต้องมีการกำหนดคำจำกัดความเนมสเปซที่สอดคล้องกัน (<html xmlns: my = "ถูกละเว้น">)
หากแท็กไม่มีเนมสเปซ (เริ่มต้นด้วย XX :) แต่ไม่ใช่ HTML มาตรฐานจะต้องมีการประกาศผ่าน document.createElement ("ชื่อแท็ก")
หากเราวางแผนที่จะกำหนดรูปแบบสำหรับแท็กที่กำหนดเองเราต้องใช้ document.createElement ("ชื่อแท็ก") เพื่อปรับแต่งโดยไม่คำนึงถึงเนมสเปซ XML (พิสูจน์ได้ว่าความหมายของญาติของเนมสเปซ XML มีแนวโน้มมาก: ไม่จำเป็นต้องสนใจแท็กที่กำหนดเองด้วยเนมสเปซ)
4. ข่าวดี
ข่าวดีก็คือข้อ จำกัด นี้มีไว้สำหรับชื่อองค์ประกอบเท่านั้นและไม่มีผลต่อชื่อแอตทริบิวต์ ดังนั้นจึงไม่จำเป็นต้องทำการประมวลผลพิเศษสำหรับคุณสมบัติที่กำหนดเอง (<div> 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. "mytag" ปิดตัวเองคล้ายกับ <br/> "/" ในตอนท้ายเป็นทางเลือก แต่แท็ก <br> ไม่อนุญาตให้มีองค์ประกอบของเด็กดังนั้นเบราว์เซอร์จึงแบ่งออกเป็นองค์ประกอบพี่น้องสามองค์ประกอบแทนที่จะเป็นองค์ประกอบ <br> ที่มีองค์ประกอบข้อความบางอย่าง
2. โหนดข้อความ "บางข้อความ" นี่ควรเป็นลูกขององค์ประกอบ MyTag ไม่ใช่โหนดพี่น้อง
3. แท็กปิดตัวเองที่ไม่ถูกต้อง "/mytag" บอกว่ามันผิดเพราะชื่อองค์ประกอบไม่อนุญาตให้อักขระ "/" (ควรได้รับอนุญาตในตอนท้าย <br/>) นอกจากนี้องค์ประกอบที่ปิดไม่ควรเป็นส่วนหนึ่งของ DOM (ไม่ควรปรากฏในรูปแบบองค์ประกอบ) เนื่องจากใช้เป็นขอบเขตเพื่อร่างโครงสร้าง DOM เท่านั้น
6. CSS สไตล์ของชื่อแท็กที่กำหนดเอง (คำจำกัดความสไตล์ CSS สำหรับแท็กที่กำหนดเอง)
หากคุณต้องการให้ตัวเลือก CSS ถูกต้องสำหรับองค์ประกอบที่กำหนดเององค์ประกอบที่กำหนดเองจะต้องกำหนดไว้ล่วงหน้าผ่าน document.createElement ("ชื่อองค์ประกอบ") โดยไม่คำนึงถึง Namespace XML (พิสูจน์แล้วว่าไม่จำเป็นต้องกังวลเกี่ยวกับ XML Namespace ที่นี่?
นี่คือตัวอย่างของคำจำกัดความสไตล์แท็กที่กำหนดเอง:
<! doctype html> <html xmlns: ng = "จำเป็นสำหรับ ng: namespace"> <head> <title> ie ความเข้ากันได้ </title> <!-[ถ้า lte ie 8]> <script> // จำเป็นต้องเปิดใช้งานเอกสารอ้างอิง CSS CreateElement ('NG: View'); // ความคิดเห็นออกมาโอเค? - </script> <! [endif]-> <style> ng/: ดู {display: block; ชายแดน: 1px ของแข็งสีแดง; ความกว้าง: 100px; ความสูง: 100px; } ng-include {display: block; เส้นขอบ: 1px Solid Blue; ความกว้าง: 100px; ความสูง: 100px; } </style> </head> <body> <ng: ดู> </ng: ดู> <ng-include> </ng-include> </body> </html>