- ベストアンサー
jQueryを使ってDOM要素を生成し、IE6、7での表示がズレてしまう問題について
- 当方はjQueryを使用してDOM要素の生成を行っていますが、IE6、7において表示がズレてしまいます。
- 具体的には、<div id='footer_oya'>要素を#frameの後ろに移動し、その中にfooter要素を配置しています。
- しかし、IE6、7でのみズレて表示される問題が発生しています。どう解決すればよいでしょうか？
- fujiwararts
- お礼率25% (2/8)
- JavaScript
- 回答数3
- ありがとう数1
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (2)
- fujillin
- ベストアンサー率61% (1594/2576)
試しに以下のソースで実行してみましたが、「ズレ」てはいないようですが？ （スクリプト部分は省略。jQuery1.5.2でテストしました） #1様が述べているように、CSSまたはHTMLが関係していませんか？ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>test</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> </head> <body> <div style="height:250px; border:1px solid red;">a</div> <div id="frame" style="border:1px solid blue;">b</div> </body> </html>
補足
fujillin様 ありがとうございます。 ここではわかりやすく伝える為に単純に書きましたが、実際はもう少しappendを使っております。 CSSのミスではない事は確認しておりますので、どうしてもIEでの挙動が気になっています。 ＃１様の補足でも書きましたが、tree型にして確認してみたいのですが、そのtree型の書き方がよくわかりません・・・
- LancerVII
- ベストアンサー率51% (1060/2054)
こんにちは。 ずれるとは何を基準にしてずれていると判断していますでしょうか。 DOMの操作でずれたというか、CSSが関係している可能性はありませんか？ もう少し詳しい情報を補足ください。
補足
LancerVII様 ご回答ありがとうございます。 CSSは関係してないと思います。 仮にテスト環境でJqueryでの操作ではなく、普通にhtmlに同じように記述した場合、 問題なく表示されます。 問題の症状は、 フッターになるコンテンツが、正規位置より100pxほど上に表示されてしまいます。 さらにこのような記事を見つけました。 この辺りが関係してるのではないかと思ったりしています。 【IE6で複雑な要素をDOM treeに追加しないまま操作すると、正常に反映されない場合がある】 http://tech.kayac.com/archive/jquery-checkpoints.html 【jQueryでDOM要素を作成し、DOMツリーを構築する方法】 http://himaxoff.blog111.fc2.com/blog-entry-51.html しかしこの記事を見てもどうして良いのかさっぱり分からない程素人ですので、どこをどうすればいいのか分からずにいます。 宜しくお願い致します。
補足
tracer様 ご回答ありがとうございます。 ここでは単純に書きましたが本当はもっとappendやprependなど行っております。 そのせいで重くなってIEでのズレが生じてるのでしょうか・・・・ 教えて頂きましたコードを実行すると何故か２つ吐き出されてしまいます。 <div><a href="#">test</a></div> <div><a href="#">test</a></div> このようになってしまうのですが私の書き方がおかしいのでしょうか。 この様に書いてます。 $(function(){ var frame_el = $("#frame"); var frame = frame_el.html(); var footer ='<div><a href="#">test</a></div>'; var footer_oya = '<div id="footer_oya">' + footer + '</div>'; frame_el.html( frame + footer_oya ); });