盆連休は、インターネットの出来ない実家に帰省していました。
Ajaxを用いた掲示板を作って、みんなにダウンロードしてもらおうとか
いろいろ考えていたのに、なにも出来ず・・・
で、なにかネタがないものかなぁ～と思っていたときに、ふと思い出したので、
IEとFireFoxでのAjaxの挙動の違いについて紹介することにした。

IEとFireFoxでは、JavaScriptが、
一方では動き、もう一方では動かなかったりという
JavaScriptの違いがあるが、それ以外にも違うことがあるのだ～！
AjaxであるHTMLを読み込んだ時、
その読み込んだHTML内でスタイルシートを宣言していた場合。
つまり、HTML内で、
<STYLE TYPE=”text/css”>
H1 { color: red; }
</STYLE>
などと記述していた場合、または、
<LINK REL=”stylesheet” TYPE=”text/css” HREF=”../css/xxx.css” />
と記述していた場合に、
IEの場合は、スタイルシートが反映されないが、
FireFoxでは、スタイルシートが反映されていた！
という違いがあった。
詳しく実験してはいないので、あまり自信満々に言い切れないのだが・・・
で、対応はというと、
読み込んだHTMLを表示するページ、まぁ要するに親ページに
<LINK REL=”stylesheet” TYPE=”text/css” HREF=”../css/xxx.css” />
と記述しておくか、もしくは、読み込むHTMLのスタイルシート適用箇所に
直接記述しておけば良い。
つまり、上の例で言うと、読み込むHTMLのH1を、
<H1 style=”color: red;”>
というようにしておけばいい。
が、これだと全ての箇所に記述しないといけないので、少々面倒になるけどね。
ということで、今回の教訓。
IEでAjaxを使う時は、スタイルシートに気をつけろ！