Несогласованные узлы пустого текста в Internet Explorer
Следующий исходный код предупреждает о следующих результатах:
Internet Explorer 7: 29
Firefox 3.0.3: 37 (правильно)
Safari 3.0.4 (523.12.9): 38
Google Chrome 0.3.154.9: 38
Не обращайте внимания на следующие факты:
- Браузеры Webkit (Safari / Chrome) вставляют дополнительный текстовый узел в конец тега body
- Internet Explorer не имеет новых строк в своих пробельных узлах, как должны.
- Internet Explorer не имеет начального узла пробелов (есть очевидные пробелы перед тегом <form>, но нет текстового узла для сопоставления)
Среди тегов на тестовой странице следующие теги не имеют текстовых узлов с пробелами, вставленных в DOM после них: form, input[@radio], div, span, table, ul, a.
Мой вопрос: Что в этих узлах делает их исключением в Internet Explorer? Почему пробелы не вставляются после этих узлов, а вставляются в другие?
Это поведение будет таким же, если вы измените порядок тегов, переключите тип документа на XHTML (при сохранении стандартного режима).
Вот ссылка, которая дает небольшую справочную информацию, но идеального решения нет. Возможно, у этой проблемы нет решения, мне просто интересно узнать о поведении.
Спасибо Интернету, Зак
<!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>
Ответы 5
Ну ... Я бы сказал, причина в том, что это IE. Я не думаю, что у программистов было конкретное намерение сделать это таким образом.
Ну, я не имел в виду «Почему» в «Почему они так спроектировали?» Смысл, я имел в виду это в "Какая корреляция между этими узлами, чтобы заставить их действовать таким образом?" смысл.
Я предполагаю, что тег стол отличается в разных браузерах.
например какие узлы автоматически содержит таблица по умолчанию?
<table>
<thead>
</thead>
<tbody>
</tbody>
<tfoot>
</tfoot>
</table>
Конечно, это изменит дочерние узлы тега таблицы, я смотрю на дочерние узлы тела. Попробуйте панель инструментов разработчика IE, чтобы увидеть узлы пробелов в DOM. microsoft.com/downloads/…
Почему бы просто не попробовать пройтись по DOM и посмотреть, что каждый браузер думает о том, что документ содержит?
IE выполняет большую часть «оптимизации» DOM. Чтобы получить представление о том, как это может выглядеть, «Выбрать все», «Копировать» в IE, а затем «Вставить альтернативный вариант» в Visual Studio, вы получите следующее:
<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>
Таким образом, он уничтожает некоторые из пустых тегов и добавляет некоторые атрибуты по умолчанию.
IE пытается быть полезным и скрывает текстовые узлы, содержащие только пробелы.
В следующих:
<p>
<input>
</p>
Спецификация W3C DOM говорит, что <p> имеет 3 дочерних узла («\ n», <input> и «\ n»), IE будет делать вид, что есть только один.
Решение - пропустить текстовые узлы во всех браузерах:
var node = element.firstChild;
while(node && node.nodeType == 3) node = node.nextSibling;
В популярных JS-фреймворках есть функции для таких вещей.
У меня возникла аналогичная проблема, когда я пытался заставить свой код javascript работать как в FF, так и в IE. Это было очень полезно.
Захлит, я думаю, что нашел решение проблемы. (Я позволил себе переместить элементы формы в тег формы.)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!--REF http://stackoverflow.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>
Как вы можете видеть, я разделил и привязал закрывающие скобки gt (больше чем), чтобы они прилегали к следующему тегу, тем самым гарантируя отсутствие неоднозначных пробелов.
Приятным сюрпризом стало то, что он работал для всех (4 настольных) браузеров, опробованных до сих пор, и все сообщали об одинаковом количестве узлов DOM.
Да, это один из способов решения проблемы. Я предпочитаю, чтобы моя разметка была немного чище, и, вероятно, предпочел бы одно из других решений, описанных выше.
Я думаю, это выглядит разумным, и вы не создаете случайным образом лишние избыточные узлы! Сказав, что я только что отлаживал и обнаружил, что SAFARI [v.3] может иногда случайным образом сообщать о неправильном offsetTop, тем самым запутывая вещи, если полагаться на него. Но это другая проблема. Простой обходной путь все еще кажется нормальным.
Отложенный крик для node.children вместо node.childNodes: groups.google.com/forum/?fromgroups=#!topic/mozilla.dev.gaia /…developer.mozilla.org/en-US/docs/DOM/Element.children