مقدمة
دعم سمة jQuery هو وحدة تحدد ما إذا كانت المتصفحات متوافقة. تحتوي هذه الوحدة على مشكلات توافق مثل الرائد ، والمساحة tbody ، و htmlserialize ، والأناقة ، والهريبن ، والتعتيم ، cssfloat ، checkon ، optslected ، getSetAttruct الرمز.
اليوم سأراجع هذه الأشياء. يتم محاكاة المتصفحات التي تم اختبارها هي FF و Chrome و IE11 و IE6-II10 باستخدام IE11:
$ .Support.LeadingWhiteSpace - - قم بإزالة المساحات تلقائيًا في أي
$ .support.checkon- القيمة الافتراضية للراديو في Chrome هي checkon
$ .support.tbody- تلقائيًا يقوم Tbody من خلال innerhtml
$ .support.htmlserialize - سيقوم المتصفح القياسي تلقائيًا بإنشاء علامات الارتباط
$ .support.style- ستحصل eie67 getAttriute على أنواع مختلفة من البيانات ....
$ .Support.Opacity-- IE678 لا يدعم العتامة
$ .support.cssfloat ----مدعوم من المتصفح القياسي لـ CSSfloat ، يجب استخدام stylefloat
دولار
$ .Support.getSetAttribute- التوافق بين المتصفحات بين المتصفحات
$ .support.html5clone - - إصدار علامات نسخ
$ .support.boxModel - ما إذا كان لدعم نموذج مربع
$ .support.submitbubbles -bubble
$ .Support.ChangeBubbles -bubble
$ .support.focusinbubbles -bubble
$ .Support.Deleteexpando ‘'se dom هو مكون com ، ولا يمكنه حذف سمات المكون.
$ .support.nocloneevent - حدث لنسخ العنصر
$ .Support.ReliableHiddenoffsets - مشكلة TD في TR في عنصر الجدول ؛
$ .support.boxsizing - ما إذا كان يتم دعم صناديق الصناديق
$ .support.doesnotincludemargininbodyoffset- لا يحتوي الجسم على هامش (هل هي مشكلة؟)
دولار.
$ .support.boxsizingReliable- مربعات متاحة
$ .Support.ReliaBlemarginRight - - الخطأ في الهامش في Chrome
$ .support.inlineblockneedslayout - - مشكلة مع التصميم في أي
$ .support.shrinkwrapblocks - - مشكلة توسيع العرض والارتفاع تلقائيًا في IE6
$ .Support.LeadingWhiteSpace
<html> <head> <meta charset = "utf-8"/> <title> متوافق </title> </head> <body> <script type = "text/javaScript"> window.l = (function () {var el = document.createElement ("div") ، index = 0 ؛ el.style.csstext = "الحشوة: ثابتة: 0 ؛ اليمين: CreateElement في الإصدار السفلي تشمل (! el.parentnode </script> تقوم IE678 تلقائيًا بتصفية المساحات قبل وبعد العنصر ، ولا يتم تضمين المساحات في الأطفال ، <script type = "text/javaScript"> var el = document.createlement ("div") ؛ el.innerhtml = "<div id =/" null/"> </viv>" ؛ L (el.childnodes.length) ؛ </script> </body> </html>تلتزم المتصفحات القياسية بإدخال المستخدم ، ويجب أن تحتوي EL على ثلاث عقد : ["" ، "<div id =/" null/"> </viv>" ، ""] Node ؛
لا يوجد سوى عقدة واحدة في IE678 ، وهذه العقدة هي Div:
$ .Support.Checkon Property
القيمة الافتراضية لمربع الاختيار في المتصفحات القياسية هي "ON" ، و IE5678 هي أيضًا "ON" ، ولكن في بعض أدوات الويب ، فإن قيمة مربع الاختيار الافتراضي إلى "سلسلة" ، وإصدار المتصفح الحالي مرتفع للغاية ، ولا توجد مشكلة في الأساس. إذا كان لديك نسخة منخفضة من Chrome ، فيمكنك استخدام العرض التوضيحي التالي للاختبار لمعرفة ما إذا كان هناك أي مشكلة:
<html> <head> <meta charset = "utf-8"/> <title> متوافق </title> </head> <body> <script type = "text/javaScript"> window.l = (function () {var el = document.createElement ("div") ، index = 0 ؛ el.style.csstext = "Padding: 10px: Top: 0 ؛ } </script> <input id = "ck" type = 'checkbox'/> <script type = "text/javaScript"> var el = document.getElementById ("ck") ؛ // المتصفح القياسي لديه حدث تغيير ؛ el.onchange = function () {l (el.value) ؛ l (ck.checked)} // enterival event propertyChange in ie ؛ el.onpropertyChange = function () {l (el.value) ؛ l (ck.checked)} l (el.value) ؛ </script> </body> </html>$ .Support.tbody Property
إنشاء جدول جديد في IE6 و IE7 سيقوم تلقائيا بإنشاء عنصر tbody ؛
إذا أضفنا TR أو TD إلى الجدول الذي تم إنشاؤه ، فسيقوم جميع المتصفحات بإنشاء tbody تلقائيًا ؛
إذا كان جدولًا تم إنشاؤه ديناميكيًا و TR وأضف TR إلى tbody ، فلن يخرج TBOD على الإطلاق. جميع المتصفحات تتبع عمليات المطورين (من الصعب تخمين عقل المتصفح)
<html> <head> <meta charset = "utf-8"/> <title> متوافق </title> </head> <body> <script type = "text/javaScript"> window.l = (function () {var el = document.createElement ("div") ، index = 0 ؛ el.style.csstext = "Padding: 10px: Top: 0 ؛ } ؛ </script> <div id = "tb"> </div> <div id = "tb2"> </viv> <div id = "tb3"> </viv> <script type = "text/javaScript"> var el = document.getElementById ( EL.INNERHTML = "<TABLE> </TABLE>" // IE67 سوف يخرج 1. يتبع المتصفح القياسي إدخال المستخدم ولن يقوم تلقائيًا بإنشاء tbody ، وبالتالي فإن طول tobdy هو 0 L (EL.GetElementsByTagname ("tbody"). الطول) ؛ </script> <script> var el = document.getElementById ("tb2") ؛ el.innerhtml = "<table> <tr> 111 </r> </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 ("table") ؛ 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> <script type = "text/javaScript"> window.l = (function () {var el = document.createElement ("div") ، index = 0 ؛ el.style.csstext = "Padding: 10px: Top: 0 ؛ } ؛ </script> <viv> ترتد </div> <div id = "link"> </viv> <script type = "text/javaScript"> var elink = document.getElementById ("link") ؛ elink.innerhtml = '<link href = "http://cdn.bootcss.com/animate.css/3.3.0/animate.css" rel = "STYLESHEET">' ؛ </script> </body> </html>على الرغم من أنه يمكن إنشاء معظم علامات الارتباطات من خلال innerhtml ، إلا أنه ليس من الممكن بالنسبة لنا إنشاء علامات نصية من خلال innerhtml:
1 2Next صفحة اقرأ النص الكامل