Comentario: El navegador no establecerá ningún estilo para elementos desconocidos (diferentes navegadores tendrán diferentes estilos predeterminados para elementos). En versiones antes de IE9, también es imposible establecer estilos para elementos desconocidos. Hay una solución a este problema. Los amigos interesados pueden referirse a él.
Cada navegador tiene una lista de los elementos HTML que admite. Los elementos que no están en la lista se considerarán elementos desconocidos. El navegador no establecerá ningún estilo para elementos desconocidos (diferentes navegadores tendrán diferentes estilos predeterminados para elementos). En versiones antes de IE9, también es imposible diseñar elementos desconocidos. El DOM de los elementos desconocidos también se muestra incorrectamente, e IE insertará un nodo vacío sin elementos infantiles en el DOM. Todos los elementos que originalmente pensó que se convertirían en niños de este elemento desconocido se convertirán en sus nodos hermanos.
Hay una solución a este problema. Antes de usar la etiqueta del artículo, use JS para crear un elemento de artículo falso, e IE reconocerá este elemento y admitirá el uso de CSS para establecer estilos. Este elemento falso ni siquiera necesita insertarse en el DOM.
Consulte el siguiente ejemplo:
<! Doctype html>
<html lang = "en">
<Evista>
<meta http-equiv = "content-type" content = "text/html; charset = utf-8">
<title> Elementos desconocidos </title>
<estilo>
Artículo {Display: Block; Border: 1px Red Solid}
</style>
</meta> </thead>
<Body>
<Artículo>
<h1> Bienvenido al blog de Feimos </h1>
<p> Esta es su <span> por primera vez para visitar este sitio web. </span> </p>
</artículo>
</body>
</html>
IE6 no reconocerá artículos, por lo que no habrá fronteras rojas.
Pero si agregamos una oración JS a la cabeza, la situación será diferente de inmediato.
<script type = "text/javaScript">
document.createElement ("artículo");
</script>
IE6 finge que reconoce este elemento y muestra correctamente el efecto.
Podemos crear una copia falsa de todos los nuevos elementos HTML5 a la vez, por lo que no debemos preocuparnos por los navegadores que no admiten bien HTML5 en el futuro. El script habilitado HTML5 de Remy Sharp nos ayuda a hacer estas cosas. La idea básica de este script es la siguiente:
<!-[si LT IE 9]>
<script type = "text/javaScript">
var e = ("ABBR, artículo, aparte, audio, lienzo, datos, detalles",+
"Figura, pie de página, encabezado, hgroup, marca, menú, medidor, navegación, salida",+
"Progreso, sección, tiempo, video"). Split (',');
para (var i = 0; i <e .length; i ++) {
document.createElement (e [i]);
}
</script>
<! [endif]->
Primero, use anotaciones condicionales para determinar si es una versión antes de IE9, y de ser así, ejecute JS. Primero escriba todas las etiquetas nuevas en la matriz E, luego itera a través de toda la matriz y cree una copia.
El script ya está alojado en el alojamiento del proyecto de Google, puede vincular directamente este script:
<!-[si LT IE 9]>
<script src = "// html5shim.googlecode.com/svn/trunk/html5.js"> </script>
<! [endif]->
Además, este script debe colocarse al comienzo de la página, preferiblemente en la cabeza, no en la parte inferior. De esta manera, IE ejecutará este código antes de analizar la etiqueta de la página.