2009年5月18日月曜日

ie6でmax-heightとmax-widthと同等の動作を実現したい

「大きさがまちまちのサムネイルに対してmax-heightを指定し、レイアウトが崩れないようにしたい」
という要件があったんですが、max-heightやmax-widthはFireFoxやie7以降では使えるんですが、ie6では使えません。すごく困ります。
いちおう、それを回避できる外部JavaScriptがあります。
minmax.js
http://www.doxdesk.com/software/js/minmax.html
実際使ってみましたが、どうもdivに対して使う目的で作られたっぽく、今回のケースで画像に対して使ってみたところ、縦横比がおかしくなってしまうという問題がありました。
次に、cssのexpressionというのを試しました。
http://materia.useyan.jp/html/expression/

expressionというのは、
body { height: expression(body.scrollTop + 100 + 'px'); }
こんな感じでCSSの中でJavaScriptが動かせてしまうという機能。IE専用です。
関数なども動かせるので、こちらを参考にして実装してみました。
http://blog.enjoitech.jp/article/135
いちおうこれで要求は実現できたんですが、expressionにはこんな弱点があります。
http://www.inter-office.co.jp/contents/187/
というわけで、expressionを使うのは見送りました。
結局この件は、ie6の場合はoverflow:hiddenを使ってレイアウトの崩れを防ぐ、という"逃げ"の手法で対応することにしました。
時間をかければよりよい解決策も見つかったと思いますが、正直ie6のためにこれ以上時間を使うのもバカらしくなってきたのでここで手を打つことに。早くie6が死滅してくれれば、こういう苦労もなくなるんですけどね。。

0 件のコメント:

コメントを投稿