ความคิดเห็น: บทความนี้ส่วนใหญ่แนะนำวิธีแก้ปัญหาวิธีการที่องค์ประกอบ HTML5 ใหม่เข้ากันได้กับเบราว์เซอร์เก่า เพื่อนที่ต้องการมันสามารถอ้างถึงมันได้
คำถามหนึ่งสิ่งที่ครูโยนให้เราคือ: จะทำให้ IE8 เข้ากันได้กับแท็กเหล่านี้ได้อย่างไร? (ต้องการการออกแบบ DOM ใน JS)แม้ว่าฉันจะพูดถึงวันนี้ แต่ฉันก็ยังต้องเข้าใจ
<span> <! doctype html>
<html>
<head>
<meta charset = "utf-8">
<title> เปรียบเทียบความเข้ากันได้ขององค์ประกอบ HTML5 ใหม่ในเบราว์เซอร์เก่า - HTML5 Freedom </title>
</head>
<body>
<ส่วนหัว> พื้นที่ด้านบน </header>
<av> พื้นที่นำทาง </av>
<บทความ> พื้นที่บทความ </บทความ>
<Footer> พื้นที่ด้านล่าง </footer>
</body>
</html> </span>
ในเบราว์เซอร์ที่รองรับแท็ก HTML5 จะปรากฏเป็น:
-
| พื้นที่ด้านบน |
| พื้นที่นำทาง |
| พื้นที่บทความ |
- -
-
รูปแบบการแสดงผลในเบราว์เซอร์เก่าคือ:
-
-
ทั้งหมดมีเอฟเฟกต์เดียวกัน หากคุณไม่ผิดเบราว์เซอร์เก่าไม่รู้จักแท็กที่เพิ่มเข้ามาใหม่เหล่านี้ดังนั้นพวกเขาทั้งหมดจะได้รับการแก้ไขโดยใช้องค์ประกอบในบรรทัด ดังนั้นจึงมีความก้าวหน้าในการแก้ปัญหาเพื่อให้กลายเป็นองค์ประกอบบล็อกและจะไม่อยู่ในบรรทัดเดียวกัน ด้วยวิธีนี้เอฟเฟกต์เดียวกันสามารถแสดงได้ทั้งในเบราว์เซอร์ใหม่และเก่า นอกจากนี้เบราว์เซอร์รับรู้แท็ก ทางออกเฉพาะสำหรับความจำเป็นในการเพิ่มแท็กใหม่คือ:
IE8/IE7/IE6 รองรับแท็กที่สร้างขึ้นผ่านวิธีการสร้างเอกสาร คุณสมบัตินี้สามารถใช้เพื่อเปิดใช้งานเบราว์เซอร์เหล่านี้เพื่อรองรับแท็กใหม่ HTML5 รหัสมีดังนี้:
Document.createElement ('ใหม่แท็ก'); // เพิ่มเพื่อสร้างแท็กใหม่
รหัส JS มีดังนี้:
<script>
document.createElement ('header');
Document.createElement ('NAV');
document.createElement ('บทความ');
document.createElement ('footer');
</script>
หรือสร้างแท็กโดยตรงโดยการวนซ้ำ:
var e = "abbr, บทความ, กัน, เสียง, ผ้าใบ, datalist, รายละเอียด, กล่องโต้ตอบ, eventsource, รูป, ส่วนท้าย, ส่วนหัว, hgroup, เครื่องหมาย, เมนู, เมตร, NAV, เอาต์พุต, ความคืบหน้า, ส่วนเวลา, วิดีโอ". split (',');
var i = e.length;
ในขณะที่ (i-) {
document.createElement (E [i])
-
การตั้งค่าสไตล์ CSS สไตล์เริ่มต้น:
<style>
บทความ, นอกเหนือจากผ้าใบ, รายละเอียด, figcaption, รูป, ส่วนท้าย, ส่วนหัว, hgroup, เมนู, NAV, ส่วน, สรุป {
แสดง: บล็อก;
-
</style>
อีกวิธีหนึ่งคือการใช้วิธีการทำงานโดยใช้ความคิดเห็นแบบมีเงื่อนไขและรหัส JS เพื่อนำไปใช้
<span> <!-[ถ้า lt ie 9]>
<script> src = "http://html5shim.googlecode.com/svn/trunk/html5.js" </script>
<! [endif]-> </span>
เพียงเพิ่มรหัสนี้เพื่อให้บรรลุปัญหาความเข้ากันได้เกี่ยวกับความสนใจตามเงื่อนไข
<!-ถ้า lt ie9>
มันคือการพิจารณาว่ามันน้อยกว่า IE9 หรือต่ำกว่า ถ้าเป็นเช่นนั้นให้เรียกใช้งานรหัส JS นี้ ถ้าไม่ได้ให้เพิกเฉย สำหรับลิงค์ใน JS คุณสามารถค้นหาได้โดยเปิดโดยตรงและตรวจสอบ นอกจากนี้ยังเป็นรหัสชิ้นใหญ่