高さ揃えJavaScriptの落とし穴

By | 2011年1月13日

ボックスを格子状に並べて一覧表示する際、どうしても高さを揃えたいというのは当たり前の要求だと思います。
ところがCSSレイアウトの場合、隣り合うボックスの高さを揃えるということが案外大変です。
中身が画像などで高さが確実に固定できる場合はheightを指定すればいいだけなので問題ありませんが、
中身が可変コンテンツだった場合、ボックスから中身がはみ出してしまったりする危険があるため単純にheightを指定するわけには行きません。
しかもECサイトなどで商品一覧が動的に書き出されてくるような場合、何がどのような順番でいくつ書き出されるのか全く特定できないため、手動で高さを揃えてやることも不可能です。
そういう場合に威力を発揮するのがボックスの高さを揃えるためのJavaScriptです。
有名なものは
heightLine.js
jquery.flatheights.js
の2つだと思います。
これらは非常に便利で、私もよく利用させていただいています。
特に最近は2つ目のjquery.flatheighs.jsがお気に入りです。
が、このJS、思わぬ落とし穴がありました!それは、
子要素にheightが指定されていない画像が含まれているとボックスがつぶれて表示されてしまう(webkitのみ)
ということです。
普通はhtmlの属性かcssで画像のwidth・heightを指定するはずなので問題ないのですが、
サイズがバラバラの画像をプログラムで書き出すようなサイトの場合、個別の画像のwidth・heightを指定することが困難になるので敢えて指定しない、という判断を下すこともあると思います。
そういう所にこのjquery.flatheights.jsを使っていると、ブラウザが画像のサイズを取得して表示する前に高さを揃えようとしてしまうため、画像の高さが無い状態でボックスの高さを揃えてしまいます。
滅多にある状況ではないと思いますが、そういう状況も考えられなくもないので、このJSの利用を考えている方は一応注意した方がよいと思います。
ちなみにheightLine.jsの方だとどうなるか、というのは検証していないのでわかりません(汗)


One thought on “高さ揃えJavaScriptの落とし穴

  1. akemix

    SECRET: 0
    PASS: 74be16979710d4c4e7c6647856088456
    この現象、Safari、ChromeなどのWebkitで見られるようです。FireFoxやIEは問題無いです。JSの仕様というよりブラウザの仕様なのかな?

    Reply

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA