先日、IE7βのCSSの実装状況をレポートしました。どうやら、CSSのサポート状況は次の世代でもあまり宜しくないようなので、諦めてIE向けに補正用のJavaScriptを記述しました(現時点ではIE6のみを考慮)。
JavaScriptによる補正は2つ。contentで生成している装飾類とmin-widthのサポートです。
問題が発生したのは、min-widthのサポート。min-widthを擬似的にサポートするために、ウィンドウのサイズが特定のサイズを下回ると、CSSのクラス名を変更することでwidthを固定する手法を用いました。前者の検出にはonresizeで、後者はID名で参照してクラス名を書き換えます。
検証用のページを追加しました。http://devious.ｕｐ.seesaa.net/inspection/index.html 安全のため、直リンクとしては張っておりません。ｕｐ(大文字)をup(小文字)に変えるてアクセスしてください。IE6でアクセスし、ウィンドウのサイズを小さくしてください。ある程度小さくするとクラッシュする、というのが今回のバグです。元々、IDでスタイルシートは適用しているので、クラスではwidthのみの適用となります。スタイルシートの一部を抜粋したものが以下のものとなります。
#container{
margin:0px auto 0px auto;
width:90%;
font-size:100%;
padding-right:10px ;
background-image:url("https://devious.up.seesaa.net/bg/links.png") ;
background-position:right ;
background-repeat:repeat-y ;
min-width:700px ;
}
/*****************************
IEのmin-width非サポートを補う
*****************************/
.containerIEmini{
width:700px !important ;
}
#banner{
margin:0px;
height:190px;
min-width:500px ;
text-align:right ;
overflow:visible ;
}
/*****************************
IEのmin-width非サポートを補う
*****************************/
.bannerIEmini{
width:500px !important ;
}
JavaScriptのファイルの抜粋は、以下のとおりです。
/*****************
ブラウザの簡易判別
******************/
var IE = navigator.userAgent.indexOf("MSIE") ;
var Opera = navigator.userAgent.indexOf("Opera") ;
var Gecko = navigator.userAgent.indexOf("Gecko") ;
function rechk(){
if( (IE != -1)&&(Opera == -1)&&(Gecko == -1) ){
return true ;
}
}
/*****
おわり
*****/
window.onload = function(){
if( (document.getElementById("photos")) && (rechk()) ){
/**************************************
min-widthを補う(呼び出しのみ) 問題箇所
**************************************/
MWpre();
/*****
おわり
*****/
}
}
/****************************************
リサイズ時のmin-width処理を補う 問題箇所
****************************************/
if(rechk()){
window.onresize = MWpre ;
}
/*****
おわり
*****/
/********************
min-widthを補う(本体)
********************/
function MWpre(){
if(window.innerWidth < 770){
MW() ;
}
else{
MW2() ;
}
}
function MW(){
document.getElementById("container").className = "containerIEmini" ;
document.getElementById("banner").className = "bannerIEmini" ;
}
function MW2(){
document.getElementById("container").className = "" ;
document.getElementById("banner").className = "" ;
}
コードの出来不出来はさておき(それには触れないで^^;)、こんな単純なことでクラッシュしてしまうようです。 ウィンドウサイズが指定値を下回って、クラス名の書き換えが行われるとクラッシュしました。IEのバージョンは6.02900.2180.xpsp_sp2_gdr.050301-1519です。 OSはWindowsXP SP2です。
このおかげで、せっかく書いたコードが使えなくなってしまいましたが(素人にはこんな単純なものでも、結構大変なんです…)、 装飾の類は問題なさそうなので、まぁ良しとします。しかし、単純なことでブラウザってクラッシュしてしまうんですね。
