Compatibilidad de Internet Explorer
1. Resumen
Este artículo describe las características de Internet Explorer (es decir) que manejan los atributos y etiquetas HTML personalizados (que pueden entenderse como "propiedades especialmente malas"). Si planeamos hacer que la aplicación sea compatible con IE8 y a continuación, podemos continuar leyendo.
2. Versión corta (descripción breve)
Para que nuestra aplicación angular funcione en IE, asegúrese de:
1. Introducir JSON.Stringify según sea necesario (es decir, IE7 o abajo requiere esto). Podemos usar JSON2 (https://github.com/douglascrockford/json-js) o json3 (http://bestiejs.github.com/json3/).
2. No use etiquetas personalizadas como <ng: ver> (reemplace con versiones de atributos, como <div ng-view>). Si aún desea usarlo, consulte el punto 3.
3. Si realmente desea usar etiquetas personalizadas, debe hacer los siguientes pasos para que las viejas sepan sus etiquetas personalizadas.
<html xmlns: ng = "http://angularjs.org"> <Head> <!-[if LTE IE 8]> <script> document.createElement ('ng-include'); document.createElement ('ng-pluralize'); document.createElement ('ng-view'); // Opcionalmente estos para CSS Document.CreateElement ('ng: include'); document.createElement ('ng: pluralize'); document.createElement ('ng: ver'); </script> <! [Endif]-> </head> <body> ... </body> </html>Lo que necesita atención es:
XMLS: NG - Espacio de nombres - Para cada etiqueta personalizada que planeamos usar, debe haber un espacio de nombres.
document.createElement ("Nombre de etiqueta personalizado")-Creación del nombre de la etiqueta personalizado-Debido a que este es un problema con la versión anterior de IE, necesitamos manejarlo especialmente a través de los comentarios del juicio de IE (<!-[Si LTE IE 8]> ... <! [Endif]->). Para cada etiqueta sin espacio de nombres o predeterminado no HTML, este tipo de predefinido es necesario para que no sea estúpido (por ejemplo, no hay estilo ...).
3. Versión larga (detalles)
IE tiene problemas para manejar etiquetas HTML no estándar. Esto puede tener aproximadamente dos tipos de atmósfera (con y sin espacios de nombres), y cada categoría tiene su propia solución.
Si el nombre de la etiqueta comienza con "my:", se considerará como el espacio de nombres, y se debe definir una definición de espacio de nombres correspondiente (<html xmlns: my = "ignored">).
Si la etiqueta no tiene espacio de nombres (comenzando con xx :) pero no es un HTML estándar, debe declararse a través de document.createElement ("nombre de la etiqueta").
Si planeamos definir estilos para etiquetas personalizadas, debemos usar document.createElement ("nombre de la etiqueta") para personalizarlo, independientemente del espacio de nombres XML (demuestra experimentalmente que el significado del relativo del espacio de nombres XML es muy probable: no es necesario preocuparnos por las etiquetas personalizadas con el espacio de nombres).
4. Las buenas noticias
La buena noticia es que esta restricción es solo para nombres de elementos y no tiene ningún efecto en los nombres de atributos. Por lo tanto, no hay necesidad de hacer un procesamiento especial para propiedades personalizadas (<iv> My-Tag Your: tag> </div>).
5. ¿Qué sucede si no hago esto? (¿Qué pasará si no haces estos tratamientos?)
Supongamos que tenemos una etiqueta HTML no estándar (el mismo resultado es para mi: etiqueta o my-etiqueta. Pero después de las pruebas, descubrimos que el método del espacio de nombres no tendrá tal molestia).
<html> <body> <mytag> algún texto </mytag> </body> </html>
En términos generales, se convertirá en la siguiente estructura DOM:
#document +- html +- cuerpo +- mytag +- #text: algún texto
Lo que esperamos es que el elemento del cuerpo tenga un elemento infantil mytag, y el mytag tiene un elemento infantil de texto "algún texto".
¡Pero IE no hace esto (si se toman medidas correctivas, no se incluirán)!
#Document +- html +- cuerpo +- mytag +- #text: algún texto +- /mytag
En IE, el cuerpo tendrá 3 elementos infantiles:
1. Un "mytag" autodenominado, similar a <br/>. El "/" al final es opcional, pero la etiqueta <br> no permite ningún elemento infantil, por lo que el navegador lo divide en tres elementos hermanos, en lugar de los elementos individuales <br> que contienen algunos elementos de texto.
2. Un nodo de texto "algún texto". Esto debería haber sido un hijo del elemento mytag, no su nodo hermano.
3. Una etiqueta incorrecta de cierre automático "/mytag" dice que está mal porque el nombre del elemento no permite el carácter "/" (debe permitirse al final <br/>). Además, el elemento cerrado no debe ser parte del DOM (no debe aparecer en forma de elemento), ya que se usa solo como un límite para delinear la estructura DOM.
6. estilo CSS de nombres de etiquetas personalizados (definición de estilo CSS para etiquetas personalizadas)
Si desea que el selector CSS sea válido para elementos personalizados, entonces los elementos personalizados deben ser predefinidos a través de documentos.
Aquí hay un ejemplo de definición de estilo de etiqueta personalizado:
<! DocType html> <html xmlns: ng = "necesaria para ng: namespace"> <head> <title> es decir, compatibilidad de IE </title> <!-[if LTE IE 8]> <script> // Necesitaba hacer que el documento de Ng-Include PARSE correctamente. // Necesitaba habilitar el documento de referencia CSS.CreateElement ('Ng: Ver'); // Comentar OUT ¿Está bien? ! </script> <! [endif]-> <style> ng/: ver {display: block; borde: 1px rojo sólido; Ancho: 100px; Altura: 100px; } ng-include {display: block; borde: 1px azul sólido; Ancho: 100px; Altura: 100px; } </style> </head> <body> <ng: ver> </ng: ver> <nginclude> </nginclude> </body> </html>