[IE] IE6にまつわる問題

この記事は3年以上前に書かれた記事です。情報が古い可能性があります。

Internet Explorer は 2022年6月15日に公式サポートが終了しました。

IE6 は Windows XP にデフォルトでついているブラウザで、おそらく今最も普及率が高いのだが、何せバグが多くて悩みの種になること多々。

複数ウィンドウを開くとセッションが切れてしまう問題

IE6 を複数ウィンドウ開くとセッションが切れてしまうことがある。これは MS 認識済み。

上記はローカルページを開くと切れるような記述だけど、インターネット上のページでも次の手順で同様の問題が起こる。

まず1つIEを立ち上げ、さらにもうひとつIEを立ち上げる。
後から立ち上げた方のIEでセッションを利用するサーバへログイン（セッション生成）する。
ログインしたIEでセッション情報を引き継いで処理を行うポップアップウィンドウ（window.open）を表示する。
3でポップアップしたウィンドウではセッションが切れている！

これは、どうやらポップアップウィンドウが、1の段階で最初に開いたほうのウィンドウを親だと勘違いしているらしく、当然そちらのウィンドウではログインしていないので、引き継ぐべきセッションが見つからずエラーになると。

おそらく同じ原因でこちらも報告されている。

仕様である！と決め台詞書かれてますが。

要は、クライアントであるブラウザはCookie情報をサーバ側に渡していて、サーバ側はそれをセッション管理に使用することになるんだけど、上記のオペレーションによってこのCookie情報が消える、または子ウィンドウに引き継がれない為に、このような事態になると考えられる。

対策としては、window.open などで開いたウィンドウに対して、そいつの親が誰であるかわからせてやれば良い、ということになる。

function openWindow( url, width, height ) {
    var sOptions = "toolbar=no,status=no,resizable=yes,dependent=yes,scrollbars=yes" ;
    sOptions += ",width=" + width ;
    sOptions += ",height=" + height ;
 
    var newWindow = window.open( url, 'newWindow', sOptions ) ;
 
    if ( navigator.appName.toLowerCase().indexOf('internet explorer')+1?1:0 )
    {
        // IEの場合は親子関係の紐付けを保つように処理を書いてやる。
        if ( newWindow ) {
            newWindow.opener = window ;
        }
    }
}

この問題は IE7 では解消されている。

FCKEditorをIE6で使う場合

上記問題により、IE6でFCKEditorのサーバブラウザ（ファイルを添付するやつ）を開くと、その画面がセッション切れになることがある。

FCKEditorはそのことが考慮されていて、 fckconfig.js の設定の中で

FCKConfig.PreserveSessionOnFileBrowser = true ;

とすると、セッションが切れないようになる。

このフラグの分岐部分は、 fck_dialog_common.js の中の OpenFileBrowser?()。

参考

http://support.microsoft.com/default.aspx?scid=831678

透過PNGがサポートされていない問題

IE6はPNGのアルファチャンネルに対応していないので、PNG画像が透過しない。

これは次のようにして回避可能。

<script type="text/javascript">
//<!--
    var isIE = (navigator.appName.toLowerCase().indexOf('internet explorer')+1?1:0);
    if (isIE) {
        document.write('<img src="blank.gif" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=alpha.png, sizingmethod=image);" />');
    } else {
        document.write('<img src="alpha.png" alt=""/>');
    }
//-->
</script>

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の仕様に準じていないらしい。

要素のはみ出しの処理の不具合（IE）（HTMLタグボードより）

このページではIE6以前のバージョンでの不具合と報告されているけど、 IE7の動作もちょっとあやしい。

overflowというのは、基本的には「枠からはみ出す部分は、そのままはみ出して表示しろ」という指示になるのだけど、IEはこれを無視して、枠自体を広げてしまうというおせっかいをやってくれるわけだ。ちなみに、サイズの最大値を指定する max-width とか max-height というものがあるが、これらはIEではサポートされていない（これはIEの仕様）。

これは、例えば次のようなスクリプトで対応するしかないのか。

function scrollBoxStyle() {
 
    if ( navigator.appName.toLowerCase().indexOf('internet explorer')+1?1:0 ) {
 
        // 枠のサイズを広げたくない要素のサイズを指定してしまう。
        var tblDiv = document.getElementById('tbl');
        if (tblDiv) {
            tblDiv.style.width = '400px';
            tblDiv.style.height = '500px';
            tblDiv.style.overflow = 'scroll';
            // ↓必要に応じて。
            //tblDiv.style.overflow = 'hidden';
            //tblDiv.style.overflow = 'auto';
        }
    }
}

あとは、条件付コメント(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">

これは本当に一番先頭でなければならない。

コメントや空白をこれより前に書くと無効になる（後方互換になる）。

参考

IE6 「標準準拠モード」でボックスを見る

IEでfile入力がある場合

input type=”file” がある場合、その入力がローカルファイル形式になっていないと submit が無効になる。（ボタンを押しても送信されない。）

ボタンを押した後、二重送信防止などの目的でボタン無効などにしている場合、 submit されていないのにボタンが無効になっちゃったりするので注意です。

参考

Input type = file 属性の入力フォームにて submit を行っても Web サーバーから反応がない

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"
    );
}

同じようにして max-width, max-height も可能。
2px ほど大き目の判定にしているのは、ピッタリだと何故かIEが固まることが多いので。何故かは謎。
ただ、expression はちょっと重いので、1つのページにあまり多用しないように。

IE7 におけるズーム機能の問題

IE7で、例えば次のように、文字列と文字列の間に画像を挟んで表示した場合にズーム機能を使うと、画像が文字の上に重なってしまう。

左の文字列<img src="test.png" />右の文字列

これの原因が分からず、ずっと悩んでいたんだけど、どうやら IE7 の不具合らしい。

Internet Explorer 7 におけるズーム機能の問題

これは、

左の文字列<span><img src="test.png" /></span>右の文字列

みたいに span で括ってやると重ならなくはなる。が、表示位置がズレるという別の問題が発生する。

結局、IE7の修正を待つかIE8にするしかないのか。