Várias soluções para resolver o problema de não suportar tags html5 compatíveis com o IE6/7/8

Autor：Eve Cole Data da Última Atualização：2025-04-03 20:00:04

HTML5/">The era of HTML5 is popular has arrived. If you are still waiting for browser compatibility, it means you are out of touch with the web. Of course, this is due to the booming development of mobile clients. If you are still struggling with whether you should master html5 and css3 technologies, please slap yourself a few times, and then learn hard! Because the spring on the front end has arrived, and more than one spring. If Você não acredita, só posso dizer: acredite ou não!

Vamos dar uma olhada em uma estrutura de tags HTML5 padrão: (estou apenas falando sobre tags aqui, e nada mais está envolvido)

<! Doctype html>

<html>

<head>

</head>

<Body>

</header>

</seção>

</artigo>

</body>

</html>

O avanço da etiqueta HTML5 é, obviamente, porque sua semântica é mais intuitiva. Obviamente, esta é apenas uma das dicas do progresso do HTML5. Algumas pessoas sugerem que: não diga que o progresso do HTML5 é revolucionário, mas desenvolvimental! Não me oponho a essa afirmação, mas é realmente revolucionária em alguns aspectos. Eu não quero sair do tópico aqui, falamos apenas sobre rótulos.

Obviamente, quando empolgado com uma tag semântica tão maravilhosa, não só preciso perguntar: o IE apoia? Infelizmente, a resposta é não. Se você já está assustado com o IE, deve continuar suportando sua tortura infinita. (IE9 e IE10 já são compatíveis e suportam HTML5 e CSS3/"> CSS3.0)

Mas você deve estar feliz por haver muitos gênios nesta época em que você mora. Alguém ajudou você a resolver esse problema! Embora, não possa ser chamado de perfeito!

Vamos dar uma olhada em várias soluções para resolver o problema de não suportar tags HTML5 compatíveis com o IE6/7/8:

1. JavaScript: document.createelenment (......)

Parte do motivo pelo qual o IE6/7/8 não é suportado é que eles não consideram o rodapé como uma tag HTML válida. Então, não faremos apenas um rótulo? É claro que a maneira mais direta é criar javascript: document.createelenment (......)!

(função(){

var elemento = ['cabeçalho', 'rodapé', 'artigo', 'à parte', 'seção', 'navegação', 'menu', 'hgroup', 'detalhes', 'diálogo', 'figura', 'figcaption'],

len = element.length;

while (len-) {

document.createElement (elemento [i])

}

}) ();

Isso está simplesmente criando algumas tags HTML5 típicas para que elas possam se tornar tags no IE6/7/8.

Alguém escreveu um arquivo JS completo, você só precisa apresentá -lo, assim:

<!-[se lt ie 9]>

<! [endif]-> Há também escrita

<!-[se LTE IE 9]>

<! [endif]-> A única diferença entre html5shiv e html5shim é M e V, e não há outra diferença! Claro que não foi isso que eu disse. O texto original é: ... a única diferença é que um tem um M e um tem AV - é isso.

Aqui queremos fazer uma nota especial: ou seja, o julgamento exclusivo da anotação:

LTE: A abreviação é menor ou igual a, o que significa menor ou igual a.

LT: A abreviação é menor que, o que significa menos do que.

GTE: A abreviação é maior ou igual a, o que significa maior ou igual a.

GT: A abreviação é maior que, o que significa maior que.

! : Isso significa não igual, o mesmo que o símbolo de julgamento não igual em JavaScript

Embora o IE9 suporte tags HTML5, o suporte não é muito completo, para que você também possa escrever LTE, o que depende de sua escolha!

Obviamente, não se esqueça de especificar a propriedade Display da tag recém -criada. Na maioria dos casos, quero que a tag seja bloqueada:

Cabeçalho, rodapé, artigo, à parte, seção, navegação, menu, hgroup, detalhes, diálogo, figura, figcaption {Display: Block}

2. Métodos de Nestamento Tags

De fato, para ser franco, é porque as tags html5 semânticas Nest divs e outras tags disponíveis e apenas escrevem estilos para divs. Não concordo com este método de escrita. Isso é melhor do que fazê -lo, dê à tag um ID ou classe semântica!

<!-[se lt ie 9]>

corpo> * .seção {

Cor: #ff0;

}

</style>

<! [endif]->

Seção .Section {Color: #f00;

}

</style>

<Section> <div> Teste de conteúdo ... </div> </section>

Mas se for semelhante a essa estrutura, não é seguro usar :

<MAV>

<ul>

</ul>

</Arn>

3. IE comentários condicionais

<!-[se lt ie 9]> <div> <! [endif]->

<!-[se ie 9]> <Section> <! [endif]->

<!-[se! ie]> <!-> <seção> <!-<! [endif]->

......

<!-[se lt ie 9]> </div> <! [endif]->

<!-[se ie 9]> </section> <! [endif]->

<!-[se! ie]> <!-> </section> <!-<! [endif]->

Veja o julgamento de comentário único do IE novamente:

LTE: A abreviação é menor ou igual a, o que significa menor ou igual a.

LT: A abreviação é menor que, o que significa menos do que.

GTE: A abreviação é maior ou igual a, o que significa maior ou igual a.

GT: A abreviação é maior que, o que significa maior que.

! : Isso significa não igual, o mesmo que o símbolo de julgamento não igual em JavaScript

Eu acredito que todo mundo entende o que está acontecendo! Esta é uma maneira mais dolorosa! Uma grande quantidade de código HTML torna o código que originalmente queria ser semantilizado ainda mais confuso. E não é propício a estilos de escrita.

4. Use XMLNs para definir o espaço de vida do documento

XMLNS é a abreviação do espaço para nome XHTML, que é o chamado namespace. Como a declaração Doctype, o XMLNS também é uma declaração. Ao contrário da declaração Doctype ainda existe em documentos HTML, o XMLNS não existe nos documentos HTML. Os XMLNs que geralmente vemos aparecem nos documentos XHTML.

<html xmlns = http: //www.w3.org/1999/xhtml lang = en> Este é o espaço de nome original do XHTML, que foi simplificado após o HTML5.

<html lang = en> O método dos registros Elco Klingen atraiu atenção generalizada no início. Esta técnica contém um espaço de nome XML e usa elementos com prefixo de namespace, como:

<! Doctype html>

<Body>

<html5: seção>

<!-Conteúdo->

</html5: seção>

</body>

</html>

O prefixo de: HTML5 não é uma maneira padrão de escrever, você também pode usar outros caracteres: o HL5 também está ok. Com o prefixo, o IE reconhece novos elementos, permitindo que os estilos sejam aplicados. Funciona também em outros navegadores; portanto, no final, você constrói com sucesso os mesmos elementos e o mesmo estilo em cada navegador.

Este método tem uma falha clara: você precisa usar um espaço para nome de XML formatado em documentos HTML, e também precisa fazer isso no CSS:

HTML5/: Seção {

exibição: bloco;

}

Então, como está a compatibilidade com o JS? Aqui está um teste deml

<! Doctype html>

<head>

html5/: Seção {display: block; Largura: 100px; Altura: 50px; Antecedentes:#f00; borda: 1px azul sólido; Cor: #ff0; }

</style>

<Cript>

window.onload = function () {

alert (document.getElementById ("teste"). Innerhtml + "--- id")

alert (document.getElementsByTagName ("Seção") [0] .innerhtml + "--- tagname")

alert (document.getElementsByTagName ("Seção") [0] .innerhtml + "--- Uppercase")

}

</script>

</head>

<Body>

<html5: seção id = "test"> content </html5: seção>

</body>

</html>

Os resultados dos testes foram testados pelo IE6/7/8, mas apenas os IDs podem ser obtidos no FixFox e Chrome, portanto esse método não é um método aceitável!