Vorwort
Die Attributunterstützung von JQuery ist ein Modul, das feststellt, ob Browser kompatibel sind. Dieses Modul enthält Kompatibilitätsprobleme wie Leadingwhitespace, Tbody, htmlserialize, style, hrefnormalisiert, opazität, cssfloat, checkon, optelected, getSetattribute .... Alle diese Attribute werden nur in JQuery verwendet, da einige Module. In Jq. Code.
Heute werde ich diese Dinge überprüfen. Die getesteten Browser sind FF, Chrome, IE11 und IE6-IE10 werden mit IE11 simuliert:
$ .support.leadingwhitespace - - automatisch Räume in IE entfernen
$ .Support.Checkon »-Der Standardwert des Radios in Chrome ist Checkon
$ .support.tbody »-ie generiert automatisch TBODY über Innerhtml
$ .support.htmlSerialize - Der Standardbrowser generiert automatisch Link -Tags
$ .Support.Style —--ie67 GetArtriute erhält verschiedene Arten von Daten ....
$ .Support.Opazität »IE678 unterstützt keine Opazität
$ .Support.cssfloat -unterstützt vom Standardbrowser von CSSFloat, dh Stylefloat verwenden muss
$ .support.optSelected »Der Browser setzt die Standardoption nicht fest
$ .support.getSetAttribute — -Getsetattribute Kompatibilität zwischen Browsern
$ .support.html5Clone - - Ausgabe von Kopieretags
$ .support.boxmodel - Ob Sie das Box -Modell unterstützen
$ .Support.SubMitBubbles »Bubble
$ .Support.Changebubbles --Bubble
$ .Support.Focusinbubbles »Bubble
$ .support.DeleteExpando ―ies DOM -Element ist eine COM -Komponente und kann die Attribute der Komponente nicht löschen.
$ .support.nocloneEvent - Ereignis zum Kopieren des Elements
$ .Support.REFIRIALHIDDDENOFTSETS - Das Problem von TD in TR im Tabellenelement;
$ .support.boxsizing - ob BoxSizing unterstützt wird
$ .support.doesnotincludemargininBodyOffset »Körper enthält keine Marge (ist es ein Problem?)
$ .support.pixelposition - Steckt, ob der vom Stil zurückgegebene Pixelwert
$ .support.boxsizingRingaby »Is Boxsizing verfügbar
$ .support.reliablemarginRight - - Der Fehler im Rand in Chrom
$ .support.inlineBllockneedslayout - - Problem mit dem Layout in IE
$ .support.shrinkwrapblocks - - Das Problem der automatischen Erweiterung der Breite und Höhe in IE6
$ .support.leadingwhITespace -Eigentum
<html> <kopf> <meta charset = "utf-8"/> <title> kompatibel </title> </head> <body> <script type = "text/javaScript"> window.l = (function () {var el = document.createelement ("div"), index = 0; el.style.csSttext = "Padding: 10px; CreateLement in IE niedrigerer Version enthalten; </script> IE678 filtert automatisch die Leerzeichen vor und nach dem Element, und die Leerzeichen sind nicht in Childnodes enthalten, <script type = "text/javaScript"> var el = document.createelement ("div"); El.Innerhtml = "<div id =/" null/"> </div>"; L (El.Childnodes.length); </script> </body> </html>Standard -Browser halten sich an die Benutzereingabe, und EL sollte drei Knoten enthalten : ["", "<div id =/" null/"> </div>", "] node;
Es gibt nur einen Knoten in IE678, und dieser Knoten ist der Div:
$ .Support.Checkon Immobilie
Der Standardwert des Kontrollkästchens in Standard -Browsern lautet "On", und IE5678 ist auch "on", aber in einigen Webkits ist der Wert des Kontrollkästchens für "String" und die aktuelle Browserversion sehr hoch, im Grunde gibt es kein Problem. Wenn Sie eine niedrige Version von Chrome haben, können Sie die folgende Demo verwenden, um festzustellen, ob ein Problem besteht:
<html> <kopf> <meta charset = "utf-8"/> <title> kompatibel </title> </head> <body> <script type = "text/javaScript"> window.l = (function () {var el = document.createelement ("div"), index = 0; el.style.csSttext = "Padding: 10px; Position: 0; }; </script> <input id = "ck" type = 'postbox'/> <script type = "text/javaScript"> var el = document.getElementById ("CK"); // Der Standardbrowser hat ein Änderungsereignis. el.onchange = function () {l (El.Value); l (CK.Checked)} // Die universelle Event PropertyChange in IE; el.onpropertychange = function () {l (el.Value); L (CK.Checked)} L (El.Value); </script> </body> </html>$ .support.tbody Eigentum
Erstellen Sie eine neue Tabelle in IE6 und IE7 erstellt automatisch ein TBODY -Element.
Wenn wir der erstellten Tabelle TR oder TD hinzufügen, erstellen alle Browser automatisch TBODY.
Wenn es sich um eine dynamisch erstellte Tabelle und TR handelt und TR zum TBODY hinzufügen, wird TBOD überhaupt nicht herauskommen. Alle Browser folgen den Operationen der Entwickler (der Geist des Browsers ist wirklich schwer zu erraten)
<html> <kopf> <meta charset = "utf-8"/> <title> kompatibel </title> </head> <body> <script type = "text/javaScript"> window.l = (function () {var el = document.createelement ("div"), index = 0; el.style.csSttext = "Padding: 10px; Position: 0; }; </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 Ausgabe 1. Der Standardbrowser folgt der Benutzereingabe und generiert nicht automatisch TBODY, sodass die Länge von Tobdy 0 l beträgt (El.GetElementsByTagName ("tbody"). Länge); </script> <script> var el = document.getElementById ("tb2"); El.Innerhtml = "<table> <tr> 111 </tr> </table>"; // ob es sich um Standard handelt oder IE67 automatisch TBODY TAG L (El.GetElementsByTagName ("tbody"). Länge); </script> <script> var el = document.getElementById ("tb3"); El.Innerhtml = "<table> <td> 111 </td> </table>"; // ob es sich um Standard handelt oder IE67 automatisch TBODY TAG L (El.GetElementsByTagName ("tbody"). Länge); </script> <script> var tb = document.createelement ("Tabelle"); var tr = document.createelement ("tr"); tr.innerhtml = "trrtrtr"; tb.Appendchild (tr); document.getElementsByTagName ("Körper") [0] .AppendChild (TB); </script> </body> </html>Nachdem der Code ausgeführt wurde, werden Sie feststellen, dass Chrome, wenn es keine Elemente in der Tabelle gibt, TBODY nicht automatisch generiert. Wenn Sie die Tabelle nicht gemäß der normalen Schreibmethode schreiben, ist dies so
"<table><tr>111</tr></table>";
Das generierte HTML wird so " 111<table><tr></tr></table>“， in jq Sie schreiben $(“<table><tr>111</tr></table>”)， und das generierte HTML ist auch wie dieses ["111","<table><tr></tr></table>"]， Standards ...
Eine weitere Ausnahme in IE. Tbody wird automatisch über Innerhtml hinzugefügt , und wenn Sie Ihre Tags falsch nisten, kümmert er sich nicht um Sie. Die Appendchild -Methode generiert nicht wie andere Browser TBODY nicht aktiv.
$ .support.htmlSerialize
IE678 Browser kann keine Link -Tags über Innerhtml dynamisch generieren. Erstellen Sie sie, indem Sie neue Tags erstellen:
<html> <kopf> <meta charset = "utf-8"/> <title> kompatibel </title> </head> <body> <script type = "text/javaScript"> window.l = (function () {var el = document.createelement ("div"), index = 0; el.style.csSttext = "Padding: 10px; Position: 0; }; </script> <div> bounce </div> <div id = "link"> </div> <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>Obwohl die meisten Link -Tags über InnerHTML generiert werden können, ist es uns nicht möglich, Skript -Tags über Innerhtml zu generieren:
1 2Next -Seite Lesen Sie den vollständigen Text