Prefacio
El soporte de atributos de JQuery es un módulo que determina si los navegadores son compatibles. Este módulo contiene problemas de compatibilidad como liderazgo de WhitWhiteSpace, Tbody, HTMLSerialize, Style, HrefNormalized, Opacity, CSSFloat, Checkon, OptSelected, GetSetAttribute ... Todos estos atributos solo se usan dentro de jQuery, porque algunos módulos dentro de JQ necesitan juzgar estas cosas, por lo que están escrita directamente en un module de apoyo, que pueden usarlo, pero que no utilizamos, pero que no utilizamos, pero que no usamos ellos, pero que no utilizamos, pero que no usamos ellos, pero que no usamos ellos, pero que no usamos ellos, pero que no utilizamos ellos, pero que no utilizamos, pero que no utilizamos, pero que no utilizamos, pero que no utilizamos, pero que no utilizamos ellos, pero que no usamos ellos, pero que no utilizamos, pero que no utilizamos ellos, pero que no usamos ellos, pero que no utilizamos, pero que no utilizamos ellos, pero que no utilizamos. código.
Hoy revisaré estas cosas. Los navegadores probados son FF, Chrome, IE11 e IE6-II10 se simulan usando IE11:
$ .support.leadingwhitespace - - Eliminar automáticamente los espacios en IE
$ .support.eckon ―-El valor predeterminado de la radio en Chrome es checkon
$ .support.tbody ―E-ie genera automáticamente tbody a través de innerhtml
$ .support.htmlSerialize : el navegador estándar generará automáticamente etiquetas de enlace
$ .support.Syle ―Ie67 getAttriute obtendrá varios tipos de datos ...
$ .support.opacity ―- IE678 no admite la opacidad
$ .support.cssfloat ---- Con el respaldo del navegador estándar de CSSFloat, es decir, debe usar Stylefloat
$ .support.optSelected ―El navegador no establece la opción predeterminada
$ .support.getSetAttribute ―-getSetAttribute Compatibilidad entre navegadores
$ .support.html5clone - - emisión de etiquetas de copia
$ .support.boxmodel : si admite el modelo de caja
$ .support.submitbubbles -bubble
$ .support.changeBubbles --bubble
$ .support .
$ .support.DelEXPando ―Es El elemento DOM es un componente COM, y no puede eliminar los atributos del componente.
$ .support.nocloneevent - evento para copiar el elemento
$ .support.reliableHidDenOffsets : el problema de TD en TR en el elemento de tabla;
$ .support.boxsizing : si se admite el boxsizing
$ .support.doesnotinCludeMarginnbodyOffset ―Noda no contiene margen (¿es un problema?)
$ .support.pixelPosition - Obtiene si el valor de píxel devuelto por el estilo
$ .support.boxsizingRelizable ―-es boxsizing disponible
$.
$ .support.inlineBlockNeedSlayout - - Problema con el diseño en IE
$ .support.shrinkwrapblocks - - El problema de expandir automáticamente el ancho y la altura en IE6
$ .support. LeadingwhiteSpace Propiedad
<html> <fead> <meta charset = "utf-8"/> <title> Compatible </title> </head> <body> <script type = "text/javaScript"> window.l = (function () {var el = document.createElement ("div"), index = 0; el.style.csstext = "Reddomina: 10px; Posicional; CreatElement in IE La versión inferior incluye ParentNode; </script> IE678 filtra automáticamente los espacios antes y después del elemento, y los espacios no están incluidos en los nodos infantiles, <script type = "text/javaScript"> var el = document.createElement ("div"); el.innerhtml = "<div id =/" null/"> </div>"; l (el.childnodes.length); </script> </body> </html>Los navegadores estándar se adhieren a la entrada del usuario, y El debe contener tres nodos : ["" "," <div id =/"nulo/"> </div> "," "] nodo;
Solo hay 1 nodo en IE678, y este nodo es el Div:
$ .support.checkon propiedad
El valor predeterminado de la casilla de verificación en los navegadores estándar está "encendido", e IE5678 también está "encendido", pero en algunos WebKits, el valor de la casilla de verificación predeterminada a la cadena "", y la versión actual del navegador es muy alto, básicamente no hay problema. Si tiene una versión baja de Chrome, puede usar la siguiente demostración para probar si hay algún problema:
<html> <fead> <meta charset = "utf-8"/> <title> Compatible </title> </head> <body> <script type = "text/javaScript"> window.l = (function () {var el = document.createElement ("div"), index = 0; el.style.csstext = "Reddomina: 10px; Posicional; }; </script> <input id = "ck" type = 'checkbox'/> <script type = "text/javaScript"> var el = document.getElementById ("ck"); // El navegador estándar tiene un evento de cambio; el.onchange = function () {l (el.value); l (ck.ecked)} // El evento universal de propiedades de evento en IE; el.onpropertychange = function () {l (el.value); l (ck.ecked)} l (el.value); </script> </body> </html>$ .support.tbody propiedad
Cree una nueva tabla en IE6 e IE7 creará automáticamente un elemento Tbody;
Si agregamos TR o TD a la tabla creada, entonces todos los navegadores crearán automáticamente tbody;
Si es una tabla creada dinámicamente y TR y agregue TR al Tbody, entonces TBOD no saldrá en absoluto. Todos los navegadores siguen las operaciones de los desarrolladores (la mente del navegador es realmente difícil de adivinar)
<html> <fead> <meta charset = "utf-8"/> <title> Compatible </title> </head> <body> <script type = "text/javaScript"> window.l = (function () {var el = document.createElement ("div"), index = 0; el.style.csstext = "Reddomina: 10px; Posicional; }; </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 emitirá 1. El navegador estándar sigue la entrada del usuario y no generará automáticamente Tbody, por lo que la longitud de Tobdy es 0 L (El.getElementsBytagName ("Tbody"). Longitud); </script> <script> var el = document.getElementById ("tb2"); el.innerhtml = "<table> <tr> 111 </tr> </table>"; // si es estándar o IE67 generará automáticamente la etiqueta tbody l (el.getElementsBytagName ("tbody"). Longitud); </script> <script> var el = document.getElementById ("tb3"); el.innerhtml = "<table> <td> 111 </td> </table>"; // si es estándar o IE67 generará automáticamente la etiqueta tbody l (el.getElementsBytagName ("tbody"). Longitud); </script> <script> var tb = document.createElement ("tabla"); var tr = document.createElement ("tr"); tr.innerhtml = "trrtrtr"; TB.AppendChild (TR); document.getElementsByTagName ("Body") [0] .AppendChild (TB); </script> </body> </html>Después de ejecutar el código, verá que cuando no hay elementos en la tabla, Chrome no genera automáticamente Tbody. Si no escribe la tabla de acuerdo con el método de escritura normal, es así
"<table><tr>111</tr></table>";
El html generado se vuelve así " 111<table><tr></tr></table>“， en jq escribe $(“<table><tr>111</tr></table>”)， y el html generado también es como este ["111","<table><tr></tr></table>"]， por lo que debe ser repetido que escribe que el nido de nido estándares ...
Otra excepción en IE. Tbody se agregará automáticamente a través de InnerHTML , y si anima sus etiquetas incorrectamente, no le importará. El método AppendChild no generará activamente tbody como otros navegadores;
$ .support.htmlSerialize
El navegador IE678 no puede generar dinámicamente etiquetas de enlace a través de InnerHTML. Para crearlos creando nuevas etiquetas:
<html> <fead> <meta charset = "utf-8"/> <title> Compatible </title> </head> <body> <script type = "text/javaScript"> window.l = (function () {var el = document.createElement ("div"), index = 0; el.style.csstext = "Reddomina: 10px; Posicional; }; </script> <div> bounce </iv> <div id = "enlace"> </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>Aunque la mayoría de las etiquetas de enlace se pueden generar a través de InnerHTML, no es factible que generemos etiquetas de script a través de InnerHTML:
1 Página de 2Next Lea el texto completo