คำนำ
การสนับสนุนแอตทริบิวต์ของ JQuery เป็นโมดูลที่กำหนดว่าเบราว์เซอร์เข้ากันได้หรือไม่ โมดูลนี้มีปัญหาความเข้ากันได้เช่น headwhitespace, tbody, htmlserialize, สไตล์, hrefnormalized, opacity, cssfloat, checkon, optselected, getsetattribute .... คุณลักษณะเหล่านี้จะใช้ภายใน jQuery รหัส.
วันนี้ฉันจะตรวจสอบสิ่งเหล่านี้ เบราว์เซอร์ที่ทดสอบคือ FF, Chrome, IE11 และ IE6-IE10 ถูกจำลองโดยใช้ IE11:
$ .support.leadingwhitespace - - ลบช่องว่างใน IE โดยอัตโนมัติ
$ .support.Checkon-- ค่าเริ่มต้นของวิทยุใน Chrome คือ Checkon
$ .support.tbody ―-ie จะสร้าง tbody โดยอัตโนมัติผ่าน innerhtml
$ .support.htmlserialize - เบราว์เซอร์มาตรฐานจะสร้างแท็กลิงก์โดยอัตโนมัติ
$ .support.style --Ie67 Getattriute จะได้รับข้อมูลประเภทต่าง ๆ ....
$ .support.Opacity-- IE678 ไม่รองรับความทึบ
$ .support.cssfloat --- ได้รับการสนับสนุนโดยเบราว์เซอร์มาตรฐานของ Cssfloat เช่นต้องใช้ Stylefloat
$ .support.optselected ― เบราว์เซอร์ไม่ได้ตั้งค่าตัวเลือกเริ่มต้น
$ .support.getSetAttribute- ความเข้ากันได้ระหว่างเบราว์เซอร์
$ .support.html5clone - - ปัญหาการคัดลอกแท็ก
$ .Support.BoxModel - ไม่ว่าจะสนับสนุนโมเดลกล่อง
$ .support.submitbubbles- ฟอง
$ .support.changeBubbles -ฟอง
$ .support.focusinbubbles- ฟอง
$ .support.deleteExpando ―ie องค์ประกอบของ DOM เป็นองค์ประกอบ COM และไม่สามารถลบแอตทริบิวต์ของส่วนประกอบได้
$ .support.nocloneEvent - เหตุการณ์เพื่อคัดลอกองค์ประกอบ
$ .support.ridiableHiddenOffSets - ปัญหาของ TD ใน TR ในองค์ประกอบตาราง;
$ .support.boxsizing - รองรับกล่องหรือไม่
$ .support.doesnotincludemargininbodyoffset- ร่างกายไม่มีอัตรากำไรขั้นต้น (เป็นปัญหาหรือไม่)
$ .support.pixelposition - รับได้หรือไม่ว่าค่าพิกเซลที่ส่งคืนโดยสไตล์
$ .support.boxsizingReliable ―-is boxsizing พร้อมใช้งาน
$ .support.Reliablemarginright - - ข้อผิดพลาดในอัตรากำไรขั้นต้นในโครเมี่ยม
$ .support.inlineblockneedslayout - - ปัญหาเกี่ยวกับเลย์เอาต์ใน IE
$ .support.shrinkwrapblocks - - ปัญหาของการขยายความกว้างและความสูงโดยอัตโนมัติใน IE6
$ .support.leadingwhitespace Property
<html> <head> <meta charset = "utf-8"/> <title> เข้ากันได้ </title> </head> <body> <body> <script type = "text/javascript"> window.l = (ฟังก์ชั่น () {var el = document.createElement ("div") "Padding: 10px; ตำแหน่ง: top: 0; ขวา: 0; ความกว้าง: 10%; CreateElement ในรุ่นที่ต่ำกว่ารวมถึง ParentNode; </script> IE678 กรองช่องว่างโดยอัตโนมัติก่อนและหลังองค์ประกอบและช่องว่างจะไม่รวมอยู่ใน ChildNodes, <script type = "text/javascript"> var el = document.createElement ("div"); el.innerhtml = "<div id =/" null/"> </div>"; l (el.childnodes.length); </script> </body> </html>เบราว์เซอร์มาตรฐานยึดติดกับอินพุตของผู้ใช้และ EL ควรมีสามโหนด : ["", "<div id =/" null/"> </div>", ""] โหนด;
มีเพียง 1 โหนดใน IE678 และโหนดนี้เป็น div:
$ .support.Checkon Property
ค่าเริ่มต้นของช่องทำเครื่องหมายในเบราว์เซอร์มาตรฐานคือ "เปิด" และ IE5678 ก็คือ "เปิด" แต่ในบาง webkits ค่าของช่องทำเครื่องหมายเริ่มต้นเป็นสตริง "" และรุ่นเบราว์เซอร์ปัจจุบันสูงมากโดยทั่วไปไม่มีปัญหา หากคุณมีโครเมี่ยมรุ่นต่ำคุณสามารถใช้ตัวอย่างต่อไปนี้เพื่อทดสอบเพื่อดูว่ามีปัญหาใด ๆ :
<html> <head> <meta charset = "utf-8"/> <title> เข้ากันได้ </title> </head> <body> <body> <script type = "text/javascript"> window.l = (ฟังก์ชั่น () {var el = document.createElement ("div") "Padding: 10px; ตำแหน่ง: top: 0; ขวา: 0; ความกว้าง: 10%; Border: 1px solid #f00;"; }; </script> <input id = "ck" type = 'copbox'/> <script type = "text/javascript"> var el = document.getElementById ("ck"); // เบราว์เซอร์มาตรฐานมีเหตุการณ์การเปลี่ยนแปลง el.onchange = function () {l (el.value); l (ck.checked)} // The Universal Event PropertyChange ใน IE; El.OnProperTyChange = function () {L (El.Value); l (ck.checked)} l (el.value); </script> </body> </html>$ .support.tbody
สร้างตารางใหม่ใน IE6 และ IE7 จะสร้างองค์ประกอบ tbody โดยอัตโนมัติ
หากเราเพิ่ม TR หรือ TD ลงในตารางที่สร้างขึ้นเบราว์เซอร์ทั้งหมดจะสร้าง tbody โดยอัตโนมัติ
หากเป็นตารางที่สร้างขึ้นแบบไดนามิกและ TR และเพิ่ม tr ลงใน tbody ดังนั้น tboD จะไม่ออกมาเลย เบราว์เซอร์ทั้งหมดติดตามการดำเนินงานของนักพัฒนา (จิตใจของเบราว์เซอร์นั้นยากที่จะเดา)
<html> <head> <meta charset = "utf-8"/> <title> เข้ากันได้ </title> </head> <body> <body> <script type = "text/javascript"> window.l = (ฟังก์ชั่น () {var el = document.createElement ("div") "Padding: 10px; ตำแหน่ง: top: 0; ขวา: 0; ความกว้าง: 10%; Border: 1px solid #f00;"; }; </script> <div id = "tb"> </div> <div id = "tb2"> </div> <div id = "tb3"> </div> <script type = "text/javascript"> var el = document.getElementById ("tb"); el.innerhtml = "<table> </table>" // ie67 จะส่งออก 1. เบราว์เซอร์มาตรฐานจะติดตามอินพุตของผู้ใช้และจะไม่สร้าง tbody โดยอัตโนมัติดังนั้นความยาวของ tobdy คือ 0 L </script> <script> var el = document.getElementById ("tb2"); el.innerhtml = "<table> <tr> 111 </tr> </table>"; // ไม่ว่าจะเป็นมาตรฐานหรือ IE67 จะสร้างแท็ก tbody l (el.getElementSbyTagname โดยอัตโนมัติ ("tbody"). ความยาว); </script> <script> var el = document.getElementById ("tb3"); el.innerhtml = "<table> <td> 111 </td> </table>"; // ไม่ว่าจะเป็นมาตรฐานหรือ IE67 จะสร้างแท็ก tbody l (el.getElementSbyTagname โดยอัตโนมัติ ("tbody"). ความยาว); </script> <script> var tb = document.createelement ("ตาราง"); var tr = document.createElement ("tr"); tr.innerhtml = "trrtrtr"; TB.AppendChild (TR); document.getElementSbyTagname ("body") [0] .AppendChild (TB); </script> </body> </html>หลังจากดำเนินการรหัสแล้วคุณจะเห็นว่าเมื่อไม่มีองค์ประกอบในตาราง Chrome จะไม่สร้าง tbody โดยอัตโนมัติ หากคุณไม่ได้เขียนตารางตามวิธีการเขียนปกติมันก็เป็นเช่นนี้
"<table><tr>111</tr></table>";
HTML ที่สร้างขึ้นจะกลายเป็นเช่นนี้ " 111<table><tr></tr></table>“， ใน jq คุณเขียน $(“<table><tr>111</tr></table>”)， ["111","<table><tr></tr></table>"]， มาตรฐาน ...
ข้อยกเว้นอื่นใน IE tbody จะถูกเพิ่มโดยอัตโนมัติผ่าน innerhtml และถ้าคุณทำแท็กของคุณไม่ถูกต้องเขาจะไม่สนใจคุณ วิธี AppendChild จะไม่สร้าง tbody เหมือนเบราว์เซอร์อื่น ๆ
$ .support.htmlserialize
เบราว์เซอร์ IE678 ไม่สามารถสร้างแท็กลิงก์ผ่าน InnerHTML แบบไดนามิกได้ เพื่อสร้างพวกเขาโดยการสร้างแท็กใหม่:
<html> <head> <meta charset = "utf-8"/> <title> เข้ากันได้ </title> </head> <body> <body> <script type = "text/javascript"> window.l = (ฟังก์ชั่น () {var el = document.createElement ("div") "Padding: 10px; ตำแหน่ง: top: 0; ขวา: 0; ความกว้าง: 10%; Border: 1px solid #f00;"; }; </script> <div> ตีกลับ </div> <div id = "ลิงก์"> </div> <script type = "text/javascript"> var elink = document.getElementById ("ลิงก์"); elink.innerhtml = '<link href = "http://cdn.bootcss.com/animate.css/3.3.0/animate.css" rel = "stylesheet">'; </script> </body> </html>แม้ว่าแท็กลิงก์ส่วนใหญ่สามารถสร้างได้ผ่าน InnerHTML แต่ก็ไม่สามารถทำได้สำหรับเราที่จะสร้างแท็กสคริปต์ผ่าน InnerHTML:
1 2NEXT หน้าอ่านข้อความเต็ม