IE 向け min-width
おはようございます。 本日2時起きの yosida95 です。
さて、 CSS でデザインを組むとき、特にリキッドデザインなんかの場合は min-width を指定して表示が小さくなりすぎないようにしていることが多いいと思います。
意気揚々とデザインを組んでいざブラウザで表示するとあれー？ IE 効かないじゃん、ほかは効くのに、ということがありますよね。
僕の環境では標準準拠を謳っている IE9 βですら意図通りにいきませんでした。
ネット上をあさって見るといろいろと情報が出ていると思います。 CSS ハックを使うパターンや、 IE 独自拡張である expressions を使う方法など出ていました。 しかし前者はどれもうまくいかなかったし、後者はサポートを終了したと Microsoft が言っています ( http://msdn.microsoft.com/ja-jp/ie/dd253083 )。
そこで、 JavaScript で IE 向けのみに有効な関数を作りました。
function minWidth(id, min, normal){
if(navigator.userAgent.indexOf("MSIE") != -1){
var obj = document.getElementById(id);
function resize(){
obj.style.width = normal;
if(parseInt(obj.clientWidth) <= parseInt(min)){
obj.style.width = parseInt(min) + 'px';
}
}
resize();
window.attachEvent('onresize', resize);
}
}
第1引数は min-width を指定したいボックスの id で第2引数は min-width の値、そして第3引数が本来の width 値です。
この関数を、 onload で呼び出せばうまくいくことでしょう。
もしうまくいかないというようなことがあったり、別の手法があったりした場合はコメントに書いておいてください。 修正させていただきます。
