JQuery, html5, append()/appendTo() и IE

Как реплицировать:

  • Создайте страницу html5.

  • Убедитесь, что вы добавили script из remysharp.com/2009/01/07/html5-enabling-script/, чтобы IE заметил теги.

  • Создайте жестко закодированный тег <section id='anything'></section>.

  • Используя jQuery 1.3.2, добавьте тег другого раздела: $('#anything').append('<section id="whatever"></section>'); Пока все работает во всех браузерах.

  • Повторите предыдущий шаг. $('#whatever').append('<section id="fail"></section>'); Здесь IE6/7 терпит неудачу. Firefox/Safari продолжит работу.

Error

error popup screenshot

Мысли

  • Возможно, IE6/7 не может обрабатывать тег раздела HTML5. Я говорю это, потому что, когда я изменяю шаг 4 от <section> до <div>, IE6/7 начнет работать.

  • Если я использую document.createElement() и создаю свой новый элемент, он работает, но похоже, что jQuery append() имеет проблему с элементами html5.

Ответы

Ответ 1

Ошибка в реализации IE innerHTML - по какой-то причине ему не нравятся "неизвестные" элементы, которые вставляются через innerHTML, тогда как DOM-скрипты в порядке.

Использование jQuery создает холдинг div и затем добавляет разметку, которую вы хотите добавить через innerHTML. IE теперь видит неизвестные элементы как два новых сломанных элемента, то есть <article>content</article> рассматривается как ARTICLE, #text, /ARTICLE, вызванный innerHTML borking.

Вот пример, проверьте это в IE, и вы увидите, что метод вставки innerHTML неверно сообщает 3 узла, вставленные в div: http://jsbin.com/olizu

Снимок экрана для тех, у кого нет IE: http://leftlogic.litmusapp.com/pub/2c3ea3e

Ответ 2

Я столкнулся с этой проблемой. По-видимому, решение состоит в том, чтобы использовать innerHTML для элемента, который уже прикреплен к документу, а затем извлечь созданные узлы. Я создал эту функцию li'l для этого:

http://jdbartlett.github.com/innershiv/

Ответ 3

Держи лошадей от сарказма там, все. Peeking at http://html5shiv.googlecode.com/svn/trunk/html5.js, html5 shiv успешно обходит IE6/7 в createElement().

В случае с карбасси выше, можно было бы надеяться, что IE6/7 сначала обратит внимание на html5 shiv, а затем выполнит jQuery append(), как и ожидалось каждый раз после этого. По-видимому, он не делает что-то в этом порядке при добавлении к append. Это удобно знать.

Ответ 4

Поддерживает ли HTML5 shiv дескриптор innerHTML? IE очень вероятно относится к innerHTML по-разному, чем DOM-методы, такие как createElement, и читая исходный код jQuery (который я рекомендую), кажется, что ваш код запускает innerHTML вместо методов DOM. Вы можете попробовать переписать <section id="fail"></section> как <section id="fail" /> (который на первый взгляд должен запускать методы DOM в процессе очистки) и посмотреть, ведет ли он себя по-другому. Если это так, вы определили ошибку в jQuery и ограничение в HTML5 shiv. Если нет, по крайней мере, это одна возможность скреститься.

Ответ 5

HTML5 не существовало при разработке IE6 и 7.