Comentário: O navegador não definirá nenhum estilo para elementos desconhecidos (diferentes navegadores terão diferentes estilos padrão para elementos). Nas versões antes do IE9, também é impossível definir estilos para elementos desconhecidos. Existe uma solução para esse problema. Amigos interessados podem se referir a ele.
Cada navegador possui uma lista dos elementos HTML que suporta. Os elementos não na lista serão considerados elementos desconhecidos. O navegador não definirá nenhum estilo para elementos desconhecidos (diferentes navegadores terão diferentes estilos padrão para elementos). Nas versões antes do IE9, também é impossível estilizar elementos desconhecidos. O DOM dos elementos desconhecidos também é exibido incorretamente, e o IE inserirá um nó vazio sem elementos filhos no DOM. Todos os elementos que você pensou originalmente se tornariam filhos desse elemento desconhecido se tornarão nós de seu irmão.
Existe uma solução para esse problema. Antes de usar a tag do artigo, use o JS para criar um elemento de artigo falso e o IE reconhecerá esse elemento e suportará o uso do CSS para definir estilos. Esse elemento falso nem precisa ser inserido no DOM.
Por favor, veja o seguinte exemplo:
<! Doctype html>
<html lang = "en">
<head>
<meta http-equiv = "content-type" content = "text/html; charset = utf-8">
<title> Elementos desconhecidos </title>
<estilo>
Artigo {Display: Block; Border: 1px Solid Red}
</style>
</meta> </ad Head>
<Body>
<Artigo>
<H1> Bem -vindo ao blog de Feimos </h1>
<p> Esta é a sua <pan> pela primeira vez para visitar este site. </span> </p>
</artigo>
</body>
</html>
O IE6 não reconhecerá artigos, então não haverá fronteiras vermelhas.
Mas se adicionarmos uma frase JS à cabeça, a situação será diferente imediatamente.
<script type = "text/javascript">
Document.CreateElement ("Artigo");
</script>
O IE6 finge que reconhece esse elemento e exibe corretamente o efeito.
Podemos criar uma cópia falsa de todos os novos elementos HTML5 ao mesmo tempo, por isso não precisamos nos preocupar com os navegadores que não suportam o HTML5 bem no futuro. O script HTML5 da Remy Sharp nos ajuda a fazer essas coisas. A idéia básica deste script é a seguinte:
<!-[se lt ie 9]>
<script type = "text/javascript">
var e = ("abbr, artigo, de lado, áudio, tela, dados de dados, detalhes"+
"Figura, rodapé, cabeçalho, hgroup, marca, menu, medidor, navegação, saída"+
"Progresso, seção, tempo, vídeo"). Split (',');
for (var i = 0; i <e .Length; i ++) {
document.createElement (e [i]);
}
</script>
<! [endif]->
Primeiro, use anotações condicionais para determinar se é uma versão antes do IE9 e, em caso afirmativo, execute o JS. Primeiro, escreva todas as novas tags na matriz E, depois itente durante toda a matriz e crie uma cópia.
O script já está hospedado no Google Project Hosting, você pode vincular diretamente este script:
<!-[se lt ie 9]>
<script src = "// html5shim.googlecode.com/svn/trunk/html5.js"> </sCript>
<! [endif]->
Além disso, esse script precisa ser colocado no início da página, de preferência na cabeça, não na parte inferior. Dessa forma, o IE executará esse código antes de analisar a tag da página.