วิธีทำให้ IE รองรับ HTML5

ความคิดเห็น: เว็บไซต์จำนวนมากขึ้นเริ่มใช้แท็ก HTML5 แต่สถานการณ์ปัจจุบันคือหลายคนยังคงใช้ IE6, IE7 และ IE8 เพื่อให้ผู้ชมทุกคนสามารถเข้าถึงได้ตามปกติจะมีโซลูชันสองแบบต่อไปนี้

1. สร้างเทมเพลตหลายชุดสำหรับเว็บไซต์และใช้โปรแกรมเพื่อตัดสินตัวแทนผู้ใช้เพื่อแสดงหน้าต่างๆสำหรับผู้ใช้เบราว์เซอร์ที่แตกต่างกันเช่น Youku

2. ใช้ JavaScript เพื่อให้แท็ก HTML รองรับโดยเบราว์เซอร์ที่ไม่รองรับ HTML5

ทางออกที่ดีกว่าสำหรับ IE คือ HTML5SHIV HTNL5SHIV ส่วนใหญ่แก้ปัญหาที่องค์ประกอบใหม่ที่เสนอโดย HTML5 ไม่ได้รับการยอมรับโดย IE6-8 องค์ประกอบใหม่เหล่านี้ไม่สามารถห่อเป็นโหนดหลักและไม่สามารถใช้สไตล์ CSS ได้ ในการใช้สไตล์ CSS กับองค์ประกอบที่ไม่รู้จักคุณสามารถทำได้โดยการดำเนินการ document.createElement (ElementName) HTML5SHIV ถูกสร้างขึ้นตามหลักการนี้

การใช้ HTML5SHIV นั้นง่ายมาก เมื่อพิจารณาว่า IE9 รองรับ HTML5 คุณจะต้องเพิ่มรหัสต่อไปนี้ลงในหน้าเพจ:

<!-[ถ้า lt ie 9]-> <script src = ""> </script> <!-[endif]->

เว็บไซต์ทางการ HTML5SHIV:

นี่คือส่วนเพิ่มเติมบางส่วน:

แน่นอนรวมถึงบล็อกของฉัน เกี่ยวกับ HTML5 ฉันต้องพูดถึง IE เมื่อผู้ผลิตเบราว์เซอร์กระแสหลักเช่น Apple, Google, Opera และ Mozilla เข้าร่วมอย่างแข็งขันในการกำหนดสูตรและการโปรโมตมาตรฐาน HTML รุ่นใหม่ Microsoft ได้ทำตามข้อกำหนด HTML 5 อย่างไรก็ตามเมื่อเร็ว ๆ นี้ Microsoft ระบุว่าจะรองรับ HTML 5 ใน IE ดังนั้น IE8 และต่อไปนี้ไม่สามารถรองรับแท็ก HTML5 ได้จนถึงตอนนี้ แต่ที่ SitePoint ฉันพบวิธีที่จะทำให้ IE สนับสนุน HTML5

ต่อไปนี้เป็นตัวอย่างที่แสดงใน IE 8 ก่อนการประมวลผล:

เพื่อให้องค์ประกอบ HTML5 สนับสนุน IE (รวมถึง IE6) เราจำเป็นต้องเพิ่ม JavaScript ต่อไปนี้ลงในส่วนหัว HTML นี่คือเอกสารง่ายๆการประกาศสร้างการสร้างคำอธิบายประกอบแบบมีเงื่อนไขเพื่อสร้างโหนดที่สอดคล้องกันในวัตถุสำหรับ IE

<!-[ถ้าเช่น]>

<script>

Document.createElement ("Header");

document.createElement ("footer");

Document.createElement ("NAV");

document.createElement ("บทความ");

document.createElement ("ส่วน");

</script>

<! [endif]->

หลังจากเพิ่มรหัสด้านบนเอฟเฟกต์ที่แสดงใน IE8 มีดังนี้:

รหัส JavaScript สำหรับการสร้างโหนดในตัวอย่าง SitePoint ดูเหมือนจะป่องเกินไปและรหัสที่ให้ไว้ใน Smokemagazine ดูเหมือนจะกระชับมากขึ้น

การสาธิตมีดังนี้

<!-[ถ้าเช่น]>

<script>

(function () {ถ้า (!/*@cc_on!@*/0) return; var e = "ส่วนหัว, ส่วนท้าย, nav, บทความ, ส่วน" .split (','), i = e.length;

</script>

<! [endif]->

HTML5 ปรากฏเป็นองค์ประกอบแบบอินไลน์โดยค่าเริ่มต้น เมื่อวางองค์ประกอบเหล่านี้เราจำเป็นต้องแปลงเป็นองค์ประกอบบล็อกด้วยตนเองโดยใช้ CSS ดังแสดงในตัวอย่างต่อไปนี้:

ส่วนหัว, ส่วนท้าย, นาวี, ส่วน, บทความ {

แสดง: บล็อก;

-