html - spacer - Nodos de texto inconsistentes de espacios en blanco en Internet Explorer
white space vs word wrap (5)
Bueno ... diría que es IE. No creo que los programadores tuvieran una intención específica de hacerlo de esa manera.
El siguiente código fuente alerta los siguientes resultados:
Internet Explorer 7 : 29
Firefox 3.0.3 : 37 (correcto)
Safari 3.0.4 (523.12.9) : 38
Google Chrome 0.3.154.9 : 38
Por favor ignore los siguientes hechos:
- Los navegadores Webkit (Safari / Chrome) insertan un nodo de texto adicional al final de la etiqueta del cuerpo
- Internet Explorer no tiene nuevas líneas en sus nodos de espacio en blanco, como deberían.
- Internet Explorer no tiene un nodo de inicio de espacio en blanco (hay espacios en blanco obvios antes de la etiqueta <form>, pero no hay un nodo de texto para que coincida)
De las etiquetas en la página de prueba, las siguientes etiquetas no tienen nodos de texto en espacio en blanco insertados en el DOM después de ellos: form , input[@radio] , div , span , table , ul , a .
Mi pregunta es: ¿qué tienen estos nodos que los convierte en la excepción en Internet Explorer? ¿Por qué el espacio en blanco no se inserta después de estos nodos y se inserta en los otros?
Este comportamiento es el mismo si cambia el orden de las etiquetas, cambia el tipo de documento a XHTML (mientras se mantiene el modo estándar).
Aquí hay un enlace que proporciona un poco de información básica , pero no es una solución ideal. Puede que no haya una solución para este problema, solo tengo curiosidad sobre el comportamiento.
Gracias a Internet, Zach
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
function countNodes()
{
alert(document.getElementsByTagName(''body'')[0].childNodes.length);
}
</script>
</head>
<body onload="countNodes()">
<form></form>
<input type="submit"/>
<input type="reset"/>
<input type="button"/>
<input type="text"/>
<input type="password"/>
<input type="file"/>
<input type="hidden"/>
<input type="checkbox"/>
<input type="radio"/>
<button></button>
<select></select>
<textarea></textarea>
<div></div>
<span></span>
<table></table>
<ul></ul>
<a></a>
</body>
</html>
Supongo que la etiqueta de la tabla es diferente entre los navegadores.
por ejemplo, qué nodos contiene automáticamente la tabla por defecto?
<table>
<thead>
</thead>
<tbody>
</tbody>
<tfoot>
</tfoot>
</table>
¿Por qué no simplemente intenta recorrer el DOM y ver qué piensa cada navegador que contiene el documento?
IE hace mucha "optimización" del DOM. Para tener una idea de cómo se vería esto, "Seleccionar todo", "Copiar" en IE, y luego "Pegar Alternativo" en Visual Studio, obtendrá lo siguiente:
<INPUT value="Submit Query" type=submit>
<INPUT value=Reset type=reset>
<INPUT type=button>
<INPUT type=text>
<INPUT value="" type=password>
<INPUT type=file>
<INPUT type=hidden>
<INPUT type=checkbox>
<INPUT type=radio>
<BUTTON type=submit></BUTTON>
<SELECT></SELECT>
<TEXTAREA></TEXTAREA>
Por lo tanto, destruye algunas de las etiquetas vacías y agrega algunos atributos predeterminados.
IE intenta ser útil y oculta los nodos de texto que solo contienen espacios en blanco.
En el siguiente:
<p>
<input>
</p>
La especificación W3C DOM dice que <p> tiene 3 nodos secundarios ("/ n", <input> y "/ n"), IE pretende que solo hay uno.
La solución es omitir los nodos de texto en todos los navegadores:
var node = element.firstChild;
while(node && node.nodeType == 3) node = node.nextSibling;
Los marcos JS populares tienen funciones para tales cosas.
Zachleat, creo que encontré una solución al problema. (Me he tomado la libertad de mover los elementos del formulario a la etiqueta del formulario).
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!--REF http://.com/questions/281443/inconsistent-whitespace-text-nodes-in-internet-explorer -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
function countNodes()
{ alert(document.getElementsByTagName(''form'')[0].childNodes.length);
};
</script>
</head>
<body onload="countNodes()">
<form
><input type="submit"/
><input type="reset"/
><input type="button"/
><input type="text"/
><input type="password"/
><input type="file"/
><input type="hidden"/
><input type="checkbox"/
><input type="radio"/
><button></button
><select></select
><textarea></textarea
><div></div
><span></span
><table></table
><ul></ul
><a></a
></form>
</body>
</html>
Como puede ver, he dividido y atado los corchetes de cierre gt (mayor que) para que se adhieran a la siguiente etiqueta, garantizando así que no haya espacios en blanco ambiguos.
Fue una sorpresa agradable que funcionó para todos los navegadores (4 de escritorio) probados hasta el momento, todos los informes de la misma cantidad de nodos DOM.