Compatibilidade do Internet Explorer
1. Resumo
Este artigo descreve as características do Internet Explorer (IE) lidando com atributos e tags HTML personalizados (que podem ser entendidos como "propriedades especialmente ruins"). Se planejarmos tornar o aplicativo compatível com o IE8 e abaixo, podemos continuar a ler.
2. Versão curta (breve descrição)
Para fazer com que nosso aplicativo angular funcione no IE, certifique -se de:
1. Introduzir JSON.Stringify conforme necessário (IE7 ou abaixo, requer essa coisa). Podemos usar o JSON2 (https://github.com/douglascrockford/json-js) ou json3 (http://bestiejs.github.com/json3/).
2. Não use tags personalizadas como <ng: view> (substitua por versões de atributo, como <div ng-view>). Se você ainda quiser usá -lo, consulte o ponto 3.
3. Se você realmente deseja usar tags personalizadas, deve fazer as seguintes etapas para informar o antigo IE suas tags personalizadas.
<html xmlns: ng = "http://angularjs.org"> <head> <!-[se lte ie 8]> <cript> document.createElement ('ng-include'); document.createElement ('ng-pluralize'); document.createElement ('ng-view'); // Opcionalmente estes para CSS document.createElement ('ng: incluir'); document.createElement ('ng: pluralize'); Document.CreateElement ('Ng: View'); </script> <! [Endif]-> </head> <body> ... </body> </html>O que precisa de atenção é:
XMLS: NG - Namespace - Para cada tag personalizada que planejamos usar, é preciso haver um espaço para nome.
Document.CreateElement ("Nome da tag personalizado")-Criação do nome da tag personalizado-Porque esse é um problema com a versão antiga do IE, precisamos lidar com isso especialmente por meio de comentários do julgamento do IE (<!-[se LTE IE 8]>… <! [endif]->). Para cada tags sem espaço para nome ou não-html, esse tipo de predefinido é necessário para que o IE não seja estúpido (por exemplo, nenhum estilo ...).
3. Versão longa (detalhes)
O IE tem problemas para lidar com tags HTML não padrão. Isso pode ter aproximadamente dois tipos de atmosfera (com e sem espaços para nome), e cada categoria tem sua própria solução.
Se o nome da tag começar com "My:", ele será considerado como o espaço para nome e uma definição de namespace correspondente deverá ser definida (<html xmlns: my = "ignorada">).
Se a tag não tiver espaço para nome (começando com xx :) mas não for um HTML padrão, ela precisa ser declarada através do documento.CreateElement ("Nome da tag").
Se planejarmos definir estilos para tags personalizadas, devemos usar o Document.CreateElement ("Nome da tag") para personalizá -lo, independentemente do espaço de nome XML (experimentalmente prova que o significado do parente do espaço para nome XML é muito provável: não é provável que se preocupe com tags personalizadas com o nome de nome).
4. A boa notícia
A boa notícia é que essa restrição é apenas para nomes de elementos e não tem efeito nos nomes de atributos. Portanto, não há necessidade de fazer processamento especial para propriedades personalizadas (<div> my-tag Your: tag> </div>).
5. O que acontece se eu não conseguir fazer isso? (O que acontecerá se você não fizer esses tratamentos?!)
Suponha que tenhamos uma tag HTML não padrão (o mesmo resultado é para o meu: tag ou my-tag. Mas, após o teste, descobrimos que o método de namespace não terá esse aborrecimento).
<html> <body> <Mytag> Algum texto </yyTag> </body> </html>
De um modo geral, será convertido para a seguinte estrutura DOM:
#document +- html +- corpo +- mytag +- #text: algum texto
O que esperamos é que o elemento corporal tenha um elemento filho mytag, e o mytag tem um elemento filho de texto "algum texto".
Mas o IE não faz isso (se medidas corretivas forem tomadas, não será incluído)!
#document +- html +- corpo +- mytag +- #text: algum texto +- /mytag
No IE, o corpo terá 3 elementos filhos:
1. Um "mytag" fechado, semelhante a <br/>. A "/" no final é opcional, mas a tag <br> não permite nenhum elemento filho; portanto, o navegador a divide em três elementos irmãos, em vez dos elementos individuais que contêm alguns elementos de texto.
2. Um nó de texto "algum texto". Isso deveria ter sido um filho do elemento mytag, não seu nó irmão.
3. Uma tag de fechamento automático incorreto "/mytag" diz que está errado porque o nome do elemento não permite o caractere "/" (ele deve ser permitido no final <br/>). Além disso, o elemento fechado não deve fazer parte do DOM (não deve aparecer na forma de elemento), pois é usado apenas como um limite para delinear a estrutura DOM.
6. Estilo CSS de nomes de tags personalizados (definição de estilo CSS para tags personalizadas)
Se você deseja que o seletor CSS seja válido para elementos personalizados, os elementos personalizados devem ser predefinidos através do documento.CreateElement ("Nome do elemento"), independentemente do espaço para nome XML (experimentalmente prova que não há necessidade de se preocupar com o espaço para nome XML aqui?!)
Aqui está um exemplo de definição de estilo de tag personalizado:
<! Doctype html> <html xmlns: ng = "necessário para ng: namespace"> <head> <title> ou seja, compatibilidade </title> <!-[se LTE ie 8]> <Cript> // precisava fazer ng-include parse corretamente documentar. // necessário para ativar o documento de referência do CSS.CreateElement ('Ng: View'); // Comentário está ok? ! </script> <! [endif]-> <yoy> ng/: view {display: block; borda: 1px vermelho sólido; Largura: 100px; Altura: 100px; } ng-incllude {display: block; borda: 1px azul sólido; Largura: 100px; Altura: 100px; } </style> </head> <body> <ng: view> </ng: view> <ng-include> </ng-include> </body> </html>