jquery - jQuery、html5、append()/appendTo()、IE

Question

複製方法:

1. html5 ページを作成します。

2. IE がタグを認識できるように、remysharp.com/2009/01/07/html5-enabling-script/ のスクリプトが追加されていることを確認してください。

3. ハードコーディングされた<section id='anything'></section>タグを作成します。

4. jQuery 1.3.2 を使用して、別のセクション タグを追加します$('#anything').append('<section id="whatever"></section>');。これまでのところ、すべてがすべてのブラウザーで機能します。

5. 前の手順を繰り返します。$('#whatever').append('<section id="fail"></section>');これは、IE6/7 が失敗する場所です。Firefox/Safari は引き続き動作します。

エラー

考え

• IE6/7 が HTML5 セクション タグを処理できない可能性があります。これは、ステップ 4 を から に変更<section>すると<div>、IE6/7 が動作し始めるためです。

• document.createElement()新しい要素を使用して作成すると機能しますが、jQueryappend()には html5 要素に問題があるようです。

Answer 1

このバグは、IE の innerHTML の実装にあり、何らかの理由で、innerHTML を介して挿入される「不明な」要素が気に入らないのに対し、DOM スクリプトは問題ありません。

jQuery は保持 div を使用して作成し、追加するマークアップを innerHTML 経由でドロップします。IE は、未知の要素を 2 つの新しい壊れた要素と見なす<article>content</article>ようARTICLEになりました。#text/ARTICLE

以下に例を示します。IE で確認すると、innerHTML 挿入メソッドが div に挿入された 3 つのノードを誤って報告することがわかります: http://jsbin.com/olizu

IE がない場合のスクリーンショット: http://leftlogic.litmusapp.com/pub/2c3ea3e

Answer 2

私もこの問題に遭遇しました。解決策は、ドキュメントに既に添付されている要素で innerHTML を使用し、作成されたノードを抽出することです。私はそれを行うためにこのli'l関数を作成しました:

http://jdbarlett.github.com/innershiv/

Answer 3

皆さん、皮肉を込めて馬を抱きしめてください。http://html5shiv.googlecode.com/svn/trunk/html5.jsをのぞくと、html5 shivは IE6/7 をだまして createElement() を実行させることに成功しています。

上記の karbassi のケースでは、IE6/7 が最初に html5 shiv に注意を払い、その後毎回期待どおりに jQuery の append() を実行することを望みます。追加に追加するとき、明らかにその順序で物事を行いません。これは知っておくと便利です。

Answer 4

HTML5 shiv は処理しinnerHTMLますか? IE は、 のinnerHTMLような DOM メソッドとは異なる方法で処理する可能性が非常に高くcreateElement、jQuery ソース (これをお勧めします) を読むと、コードがinnerHTMLDOM メソッドの代わりにトリガーされているようです。<section id="fail"></section>asに書き換えてみてください<section id="fail" />(一見すると、クリーンアップ プロセスで DOM メソッドがトリガーされるはずです)、動作が異なるかどうかを確認してください。もしそうなら、jQuery のバグと HTML5 shiv の制限を特定したことになります。そうでない場合は、少なくともクロスオフする 1 つの可能性です。

Answer 5

IE6 と 7 が開発されたとき、HTML5 は存在しませんでした。