IE6にまつわる問題 †

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

↑

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

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

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

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

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

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

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

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

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

Everything is expanded.Everything is shortened.
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15

-
|
|
|
|
|
|
|
-
-
-
|
!
!
!

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 では解消されている。

↑

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

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

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

Everything is expanded.Everything is shortened.
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10

 
-
!
-
|
-
|
!
-
!

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

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

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

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

Everything is expanded.Everything is shortened.
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16

-
|
-
|
-
!
-
|
|
|
-
|
|
!
!
!

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を場合わけするとか。

MLEXP. Wiki

トップ   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS