Préface
La prise en charge des attributs de JQuery est un module qui détermine si les navigateurs sont compatibles. Ce module contient des problèmes de compatibilité tels que le premier espace, TBODY, HTMLSerialize, Style, Hrefnormalize le code.
Aujourd'hui, je vais passer en revue ces choses. Les navigateurs testés sont FF, Chrome, IE11 et IE6-IE10 sont simulés en utilisant IE11:
$ .support.leadingwhitespace - - Retirez automatiquement les espaces dans IE
$ .Support.Checkon ―-La valeur par défaut de la radio dans Chrome est Checkon
$ .Support.TBOBY `` - Génère automatiquement TBODY via InnerHTML
$ .Support.htmlSerialize - le navigateur standard générera automatiquement des balises de liaison
$ .Support.Style ` `-Ie67 Getattriute obtiendra différents types de données ....
$ .support.opacity ``- ie678 ne prend pas en charge l'opacité
$ .support.cssfloat --- pris en charge par le navigateur standard de CSSFloat, c'est-à-dire que doit utiliser StyleFloat
$ .support.opttelected `` Le navigateur ne définit pas l'option par défaut
$ .Support.getSetAttribute ―-getSetAttribute Compatibilité entre les navigateurs
$ .Support.html5clone - - Problème de copie des balises
$ .support.boxmodel - SI pour prendre en charge le modèle de boîte
$ .Support.Submitbubbles ―BUBBLE
$ .Support.changebubbles - Bubble
$ .Support.focusinbubbles `` Bubble
$ .Support.DeteeExPando `` L'élément DOM de IE est un composant com et ne peut pas supprimer les attributs du composant.
$ .Support.NocloneEvent - Événement pour copier l'élément
$ .Support.reliableHidDenOffSets - Le problème de TD dans TR dans l'élément de table;
$ .support.boxSizing - si BoxSizing est pris en charge
$ .Support.OeSnotincludeMargininbodyOffset `` Le corps ne contient pas de marge (est-ce un problème?)
$ .support.pixelposition - obtient si la valeur de pixel est renvoyée par le style
$ .support.boxsizingReliable `` - est une boîte de boîte disponible
$ .Support.reliblegryMarginRight - - Le bug en marge dans Chrome
$ .Support.inlineBlockNeedsLayout - - Problème avec la mise en page dans IE
$ .support.shrinkwrapblocks - - Le problème de l'expansion automatique de la largeur et de la hauteur dans IE6
$ .Support.Leadingwhitespace Propriété
<html> <éad- head> <meta charset = "utf-8" /> <tight> compatible </title> </ head> <body> <script type = "text / javascript"> window.l = (function () {var el = document.createelement ("div"), index = 0; el.style.csstext = "Padding: 10px; Fixed; Top: 0; à droite: 0; CreateElement dans IE Version inférieure inclut le ParentNode; </cript> IE678 filtre automatiquement les espaces avant et après l'élément, et les espaces ne sont pas inclus dans ChildNodes, <Script Type = "Text / JavaScript"> var el = document.CreateElement ("div"); el.innerhtml = "<div id = /" null / "> </ div>"; l (el.childnodes.length); </cript> </ body> </html>Les navigateurs standard adhèrent à l'entrée de l'utilisateur et El doit contenir trois nœuds : ["", "<div id = /" null / "> </div>", ""] nœud;
Il n'y a qu'un seul nœud dans IE678, et ce nœud est le div:
$ .Support.Checkon Propriété
La valeur par défaut de la case à cocher dans les navigateurs standard est "ON", et IE5678 est également "ON", mais dans certains webkits, la valeur de la boîte à cocher par défaut est "", et la version actuelle du navigateur est très élevée, il n'y a pas de problème. Si vous avez une version basse de Chrome, vous pouvez utiliser la démo suivante pour tester pour voir s'il y a un problème:
<html> <éad- head> <meta charset = "utf-8" /> <tight> compatible </title> </ head> <body> <script type = "text / javascript"> window.l = (function () {var el = document.createelement ("div"), index = 0; el.style.csstext = "Padding: 10px; Position: Correction; }; </ script> <input id = "ck" type = 'Checkbox' /> <script type = "text / javascript"> var el = document.getElementyid ("ck"); // Le navigateur standard a un événement de changement; el.onchange = function () {l (el.value); l (ck.checked)} // L'événement universel PropertyChange dans IE; el.onpropertychange = function () {l (el.value); l (ck.checked)} l (el.value); </cript> </ body> </html>$ .Support.tbody Propriété
Créer une nouvelle table dans IE6 et IE7 créera automatiquement un élément TBODY;
Si nous ajoutons TR ou TD à la table créée, tous les navigateurs créeront automatiquement TBODY;
S'il s'agit d'une table créée dynamiquement et de TR et ajoutez Tr au TBOD, alors TBOD ne sortira pas du tout. Tous les navigateurs suivent les opérations des développeurs (l'esprit du navigateur est vraiment difficile à deviner)
<html> <éad- head> <meta charset = "utf-8" /> <tight> compatible </title> </ head> <body> <script type = "text / javascript"> window.l = (function () {var el = document.createelement ("div"), index = 0; el.style.csstext = "Padding: 10px; Position: Correction; }; </ script> <div id = "tb"> </ div> <div id = "tb2"> </ div> <div id = "tb3"> </ div> <script type = "text / javascript"> var el = document.getElementyid ("tb"); el.innerhtml = "<ballage> </pally>" // ie67 sortira 1. Le navigateur standard suit l'entrée utilisateur et ne générera pas automatiquement TBODY, donc la longueur de Tobdy est de 0 L (el.getElementsByTagName ("TBOBY"). Longueur); </cript> <cript> var el = document.getElementById ("tb2"); el.innerhtml = "<table // s'il est standard ou IE67 générera automatiquement TBODY TAG L (el.getElementsByTagName ("TBODY"). Length); </cript> <cript> var el = document.getElementById ("tb3"); el.innerhtml = "<table // s'il est standard ou IE67 générera automatiquement TBODY TAG L (el.getElementsByTagName ("TBODY"). Length); </cript> <cript> var tb = document.createElement ("table"); var tr = document.CreateElement ("tr"); tr.innerhtml = "trrtrtr"; TB.APPENDCHILD (TR); document.getElementsByTagName ("Body") [0] .APPENDCHILD (TB); </cript> </ body> </html>Une fois le code exécuté, vous verrez que lorsqu'il n'y a pas d'éléments dans le tableau, Chrome ne génère pas automatiquement TBODY. Si vous n'écrivez pas le tableau selon la méthode d'écriture normale, c'est comme ça
"<table><tr>111</tr></table>";
The generated HTML becomes like this " 111<table><tr></tr></table>“， in jQ you write $(“<table><tr>111</tr></table>”)， and the generated HTML is also like this ["111","<table><tr></tr></table>"]， so I repeatedly emphasize that writing the nesting of HTML tags must comply with the Normes ...
Une autre exception dans IE. TBODY sera automatiquement ajouté via InnerHTML , et si vous nidisez vos balises incorrectement, il ne se souciera pas de vous. La méthode de l'appendchild ne générera pas activement TBODY comme les autres navigateurs;
$ .support.htmlserialize
Le navigateur IE678 ne peut pas générer dynamiquement les balises de liaison via InnerHTML. Pour les créer en créant de nouvelles balises:
<html> <éad- head> <meta charset = "utf-8" /> <tight> compatible </title> </ head> <body> <script type = "text / javascript"> window.l = (function () {var el = document.createelement ("div"), index = 0; el.style.csstext = "Padding: 10px; Position: Correction; }; </ 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">'; </cript> </ body> </html>Bien que la plupart des balises de liaison puissent être générées via InnerHTML, il n'est pas possible pour nous de générer des balises de script via InnerHTML:
1 page 2Next Lire le texte intégral