hasLayoutメモ

IE7に付いたズーム機能を使って拡大・縮小したときにbodyに指定した背景画像が拡大・縮小されず、理由が分からず困ったことがありました。

「原因はhaslayoutの値がfalseになっているから」
隣にいた同僚にそう教えてもらってなんとかズーム機能に対応はできましたが、今後同様の事例が出た時に困らないようにメモ。

でhasLayoutって何？

hasLayout は IE 独自のプロパティで、各要素がレイアウト情報を持っているかどうかを示すもののようです。
上に書いた背景画像の拡大・縮小時のバグはhasLayoutプロパティの値がfalseになっている場合に起こるそうです。

その他のバグの情報はMicrosoftのInternet Explorer 7 におけるズーム機能の問題で紹介されてます。
ここで回避策として ZOOM 機能を無効化するという方法が書かれていますが、本末転倒というか全く意味ないですｗ

とにかく、haslayoutの値がfalseになってるからバグるなら、値ををtrueにすればバグらないはず。
cssで下の表に示すプロパティを指定すればhaslayoutに伴うバグを回避できます（参考：MSDN hasLayout Property (A, ABBR, ACRONYM, …)）。

プロパティ	値
display	inline-block
float	left もしくは right
height	any value
position	absolute
width	auto以外の値
writing-mode	tb-rl
zoom	any value

これを使って一番てっとり早くバグを解消するには、

*{
  zoom:1;
}

を指定すること。

これを指定するだけで、拡大・縮小時のバグが解消されてハッピー！となれば良かったんですが、そうはいかないのがさすがIE…。

*{zoom:1;}の落とし穴

全称セレクタを使ってhaslayoutの値をtrueにしたら、今まで発生しなかったバグが発生してしまいました…。

記事を書いていたら、olのリスト番号が表示されない！
zoom:1を指定するまではちゃんと表示されていたので、原因は間違いなくこれ。

それで調べてみたら、hasLayoutプロパティがtrueで発生するバグ - Webtech Walkerで解説されていました。
サンプルページもあり、非常にわかりやすかったです。

前の記事で全称セレクタについて書きましたが、全称セレクタを使うってことは二次災害的なデメリットが生まれるし、良くないんだなと改めて痛感しました。

そこで全称セレクタではなく、バグる要素にだけzoom:1を指定することでひとまず解決しました。

IE８からhaslayoutはなくなるらしいですが、ブラウザの移行がすんなり進むとも考えにくいので、これからもしばらくはhaslayoutに頭を悩ませることになりそうですね。