expressionでボックスの最小サイズ指定を擬似的に実現する方法
IE7ではmin-widthやmax-widthが実装されているのでもう必要ありませんが、旧ブラウザ対応としてメモ。
WinIE5/5.5/6ではmin-widthやmax-widthが有効にならないため、リキッドレイアウトや内容物の増減で変化するレイアウトを作成すると色々困ることが起きます。
それを解決するためにexpressionというCSS内でJavascriptを実行する方法を使用して、擬似的にIEでmin-widthなどを実現する方法です。
元ネタはこちら。
min-width
div#contentBox {
min-height:100px;
height:expression(
document.all('contentBox').clientWidth < 101?
'100px':'auto');
}
min-height
div#contentBox {
min-height:100px;
height:expression(
document.all('contentBox').scrollHeight < 101?
'100px':'auto');
}
max-width
div#contentBox {
max-height:100px;
height:expression(
document.all('contentBox').clientWidth > 99?
'100px':'auto');
}
max-height
div#contentBox {
max-height:100px;
height:expression(
document.all('contentBox').scrollHeight > 99?
'100px':'auto');
}
値の指定にpxではなくemを使うとすれば、こんな感じっぽいです。
div#contentBox {
min-width:10em;
width:expression(
document.all('contentBox').clientWidth < 10 * parseInt(document.body.currentStyle.fontSize)?
"10em":"auto" );
}
CSSの中にJavaScriptを書くというのは気持ち悪くてグロいし、何よりこんな面倒な事させる前に先にまともにCSSの仕様どおりに実装してほしかったところですが、CSS側だけで対応させることができるので、最終手段としては使えると思います。