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, …)）。

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

*{
zoom:1;
}

を指定すること。

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

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

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

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

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

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

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

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

※2009年10月20日17時42分　追加

せっかくなので、haslayout を false にする指定も。
こちらは、毎度勉強させてもらってるヨモツネットさんから。
hasLayout を false にするには | ヨモツネット

関連投稿

関連投稿はまだありません。

posted on 2008.07.27 11:08pm