IE6にまつわる問題 †IE6 は Windows XP にデフォルトでついているブラウザで、おそらく今最も普及率が高いのだが、 何せバグが多くて悩みの種になること多々。 複数ウィンドウを開くとセッションが切れてしまう問題 †IE6 を複数ウィンドウ開くとセッションが切れてしまうことがある。これは MS 認識済み。
上記はローカルページを開くと切れるような記述だけど、インターネット上のページでも次の手順で同様の問題が起こる。
これは、どうやらポップアップウィンドウが、1の段階で最初に開いたほうのウィンドウを親だと勘違いしているらしく、 当然そちらのウィンドウではログインしていないので、引き継ぐべきセッションが見つからずエラーになると。 おそらく同じ原因でこちらも報告されている。
仕様である!と決め台詞書かれてますが。 要は、クライアントであるブラウザはCookie情報をサーバ側に渡していて、サーバ側はそれをセッション管理に使用することになるんだけど、上記のオペレーションによってこのCookie情報が消える、または子ウィンドウに引き継がれない為に、このような事態になると考えられる。 対策としては、window.open などで開いたウィンドウに対して、そいつの親が誰であるかわからせてやれば良い、ということになる。
この問題は IE7 では解消されている。 FCKEditorをIE6で使う場合 †上記問題により、IE6でFCKEditorのサーバブラウザ(ファイルを添付するやつ)を開くと、その画面がセッション切れになることがある。 FCKEditorはそのことが考慮されていて、 fckconfig.js の設定の中で FCKConfig.PreserveSessionOnFileBrowser = true ; とすると、セッションが切れないようになる。 このフラグの分岐部分は、 fck_dialog_common.js の中の OpenFileBrowser?()。 参考 透過PNGがサポートされていない問題 †IE6はPNGのアルファチャンネルに対応していないので、PNG画像が透過しない。 これは次のようにして回避可能。
alpha.png というのが透過PNG。blank.gif は alpha.png と同じサイズの透明なGIF。 IE以外はそのまま alpha.png を表示し、IEの場合だけ AlphaImageLoader? を使う。 IE側のimgのsrcにはalpha.pngと同じサイズの透明な透過GIF(blank.gif)を指定して、 AlphaImageLoader?の方にalpha.pngを指定している。 IE7では透過PNGに対応しているので、isIE でバージョンまで判定してもいいかも。 style の overflow 指定の解釈がおかしい問題 †IEは style の overflow (枠をはみ出したときの表示方法)指定の解釈が本来規定されているCSSの仕様に準じていないらしい。 このページではIE6以前のバージョンでの不具合と報告されているけど、 IE7の動作もちょっとあやしい。 overflowというのは、基本的には「枠からはみ出す部分は、そのままはみ出して表示しろ」という指示になるのだけど、IEはこれを無視して、枠自体を広げてしまうというおせっかいをやってくれるわけだ。ちなみに、サイズの最大値を指定する max-width とか max-height というものがあるが、これらはIEではサポートされていない(これはIEの仕様)。 これは、例えば次のようなスクリプトで対応するしかないのか。
あとは、条件付コメント(Conditional Comments)でCSSを場合わけするとか。 IE6の標準準拠モード †IE6は、HTMLの先頭に次のタグを入れると標準準拠モードになる。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> これは本当に一番先頭でなければならない。 コメントや空白をこれより前に書くと無効になる(後方互換になる)。 参考 †IEでfile入力がある場合 †input type="file" がある場合、その入力がローカルファイル形式になっていないと submit が無効になる。 (ボタンを押しても送信されない。) ボタンを押した後、二重送信防止などの目的でボタン無効などにしている場合、 submit されていないのにボタンが無効になっちゃったりするので注意です。 参考 †IE6 で min-width, min-height を実現するには †IE6 は min-width, min-height に対応していないが、 スタイルシートで expression を使用すればいける。 * html body { /** * 擬似 min-width */ width: expression( ( (document.body || document.documentElement).clientWidth < 682 ) ? "680px" : "auto" ); /** * 擬似 min-height */ width: expression( ( (document.body || document.documentElement).clientHeight < 342 ) ? "340px" : "auto" ); }
IE7 におけるズーム機能の問題 †IE7で、例えば次のように、文字列と文字列の間に画像を挟んで表示した場合に ズーム機能を使うと、画像が文字の上に重なってしまう。 左の文字列<img src="test.png" />右の文字列 これの原因が分からず、ずっと悩んでいたんだけど、どうやら IE7 の不具合らしい。 これは、 左の文字列<span><img src="test.png" /></span>右の文字列 みたいに span で括ってやると重ならなくはなる。が、表示位置がズレるという別の問題が発生する。 結局、IE7の修正を待つかIE8にするしかないのか。 |