- 追加された行はこの色です。
- 削除された行はこの色です。
#freeze
* IE6にまつわる問題 [#k329d1ad]
IE6 は Windows XP にデフォルトでついているブラウザで、おそらく今最も普及率が高いのだが、
何せバグが多くて悩みの種になること多々。
#contents
** 複数ウィンドウを開くとセッションが切れてしまう問題 [#x33e8ef7]
IE6 を複数ウィンドウ開くとセッションが切れてしまうことがある。これは MS 認識済み。
- http://support.microsoft.com/kb/311072/ja
- http://support.microsoft.com/default.aspx?scid=kb;ja;315713
- http://support.microsoft.com/default.aspx?scid=300895
- http://support.microsoft.com/default.aspx?scid=kb;ja;315713
上記はローカルページを開くと切れるような記述だけど、インターネット上のページでも次の手順で同様の問題が起こる。
+ まず1つIEを立ち上げ、さらにもうひとつIEを立ち上げる。
+ 後から立ち上げた方のIEでセッションを利用するサーバへログイン（セッション生成）する。
+ ログインしたIEでセッション情報を引き継いで処理を行うポップアップウィンドウ（window.open）を表示する。
+ 3でポップアップしたウィンドウではセッションが切れている！
これは、どうやらポップアップウィンドウが、1の段階で最初に開いたほうのウィンドウを親だと勘違いしているらしく、
当然そちらのウィンドウではログインしていないので、引き継ぐべきセッションが見つからずエラーになると。
おそらく同じ原因でこちらも報告されている。
- http://support.microsoft.com/default.aspx?scid=831678
- http://support.microsoft.com/default.aspx?scid=kb;en-us;831678
仕様である！と決め台詞書かれてますが。
要は、クライアントであるブラウザはCookie情報をサーバ側に渡していて、サーバ側はそれをセッション管理に使用することになるんだけど、上記のオペレーションによってこのCookie情報が消える、または子ウィンドウに引き継がれない為に、このような事態になると考えられる。
対策としては、window.open などで開いたウィンドウに対して、そいつの親が誰であるかわからせてやれば良い、ということになる。
#code(javascript){{
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で使う場合 [#wa419411]
上記問題により、IE6で[[FCKEditor:http://www.fckeditor.net/]]のサーバブラウザ（ファイルを添付するやつ）を開くと、その画面がセッション切れになることがある。
FCKEditorはそのことが考慮されていて、 fckconfig.js の設定の中で
FCKConfig.PreserveSessionOnFileBrowser = true ;
とすると、セッションが切れないようになる。
このフラグの分岐部分は、 fck_dialog_common.js の中の OpenFileBrowser()。
''参考''
- http://support.microsoft.com/default.aspx?scid=831678
** 透過PNGがサポートされていない問題 [#g594274a]
IE6はPNGのアルファチャンネルに対応していないので、PNG画像が透過しない。
これは次のようにして回避可能。
code(javascript){{
#code(javascript){{
<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 指定の解釈がおかしい問題 [#o13a2881]
IEは style の overflow （枠をはみ出したときの表示方法）指定の解釈が本来規定されているCSSの仕様に準じていないらしい。
- [[要素のはみ出しの処理の不具合（IE）:http://www.dspt.net/stylesheet_css/001/ie_error3.html]]（[[HTMLタグボード:http://www.dspt.net/]]より）
このページではIE6以前のバージョンでの不具合と報告されているけど、
IE7の動作もちょっとあやしい。
overflowというのは、基本的には「枠からはみ出す部分は、そのままはみ出して表示しろ」という指示になるのだけど、IEはこれを無視して、枠自体を広げてしまうというおせっかいをやってくれるわけだ。ちなみに、サイズの最大値を指定する max-width とか max-height というものがあるが、これらはIEではサポートされていない（これはIEの仕様）。
これは、例えば次のようなスクリプトで対応するしかないのか。
#code(javascript){{
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を場合わけするとか。
- [[About Conditional Comments(MS):http://msdn2.microsoft.com/en-us/library/ms537512.aspx]]
- [[条件付コメント実験ページ:http://www.keynavi.net/ja/bugh/comments.html]]
** IE6の標準準拠モード [#v58263fc]
IE6は、HTMLの先頭に次のタグを入れると標準準拠モードになる。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
これは''本当に一番先頭でなければならない''。
コメントや空白をこれより前に書くと無効になる（後方互換になる）。
*** 参考 [#a18be2d6]
- [[IE6 「標準準拠モード」でボックスを見る:http://www009.upp.so-net.ne.jp/custom/hyoujyun.html]]
** IEでfile入力がある場合 [#qda9d71b]
input type="file" がある場合、その入力がローカルファイル形式になっていないと submit が無効になる。
（ボタンを押しても送信されない。）
ボタンを押した後、二重送信防止などの目的でボタン無効などにしている場合、
submit されていないのにボタンが無効になっちゃったりするので注意です。
*** 参考 [#kbb1c36d]
- [[Input type = file 属性の入力フォームにて submit を行っても Web サーバーから反応がない:http://support.microsoft.com/kb/890981/ja]]
** IE6 で min-width, min-height を実現するには [#n9b9111e]
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 におけるズーム機能の問題 [#v208ce48]
IE7で、例えば次のように、文字列と文字列の間に画像を挟んで表示した場合に
ズーム機能を使うと、画像が文字の上に重なってしまう。
左の文字列<img src="test.png" />右の文字列
これの原因が分からず、ずっと悩んでいたんだけど、どうやら IE7 の不具合らしい。
- [[Internet Explorer 7 におけるズーム機能の問題:http://support.microsoft.com/kb/933053/ja]]
これは、
左の文字列<span><img src="test.png" /></span>右の文字列
みたいに span で括ってやると重ならなくはなる。が、表示位置がズレるという別の問題が発生する。
結局、IE7の修正を待つかIE8にするしかないのか。
-----
[[MLEXP. Wiki]]
#googleads(1,1)
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
