Несовместимые пробельные текстовые узлы в Internet Explorer - PullRequest
Новая
       17

Несовместимые пробельные текстовые узлы в Internet Explorer

7 голосов
/ 11 ноября 2008

Следующий исходный код предупреждает о следующих результатах:

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 не имеет начального узла пробела (перед тегом есть очевидные пробелы, но нет текстового узла для сопоставления)

Из тегов на тестовой странице следующие теги не имеют пробельных текстовых узлов, вставленных в DOM после них: form, input[@radio], div, span, table, ul, a.

Мой вопрос: Что в этих узлах делает их исключением в Internet Explorer? Почему после этих узлов пробелы не вставляются, а вставляются в другие?

Это поведение то же самое, если вы переключаете порядок тегов, переключаете doctype на XHTML (при сохранении режима стандартов).

Вот ссылка , которая дает небольшую справочную информацию , но не является идеальным решением. Возможно, не существует решения этой проблемы, мне просто интересно поведение.

Спасибо интернету, 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>

Ответы [ 5 ]

10 голосов
/ 23 ноября 2008

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-фреймворки имеют функции для таких вещей.

0 голосов
/ 01 мая 2013

Заклеат, я думаю, что нашел решение проблемы. (Я позволил себе перенести элементы формы в тег формы.) 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!--REF /161420/nesovmestimye-probelnye-tekstovye-uzly-v-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.

0 голосов
/ 11 ноября 2008

Я предполагаю, что тег table отличается в разных браузерах.

например. какие узлы автоматически содержит таблица по умолчанию? 

<table>
  <thead>
  </thead>
  <tbody>
  </tbody>
  <tfoot>
  </tfoot>
</table>
0 голосов
/ 14 ноября 2008

Почему бы просто не попробовать пройтись по 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>

Таким образом, он удаляет некоторые пустые теги и добавляет некоторые атрибуты по умолчанию.

0 голосов
/ 11 ноября 2008

Ну ... я бы сказал, что причина в том, что это IE. Я не думаю, что у программистов было определенное намерение сделать это таким образом.

...