understandard

2008-07-27

hasLayout メモ

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

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

で hasLayout って何?

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

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

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

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

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

*{
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 にするには | ヨモツネット

プロパティ
display block もしくは inline
float none
height auto
position static もしくは relative
width auto
writing-mode lr-tb
zoom normal

response

  1. 気ままな日記
    2009-08-26 18:01:04reply

    [CSS]IEでposition:relative;の孫要素(?)のborderが消える

     昨日のにもちらっと書いたけど、IE6でposition:relative;で配置している要素の孫要素のborderが消える……。かといって消えないものもあって、ちょっとよく分からない。ということで、調…

  2. ある要素内にpaddingが付いてる子要素があったりなかったりする場合に余計なclassを付けないでpaddingを揃える | 乱雑モックアップ
    2010-09-15 11:24:59reply

    […] hasLayoutメモ | CSS | understandard.net hasLayoutの値をtrueにする指定 […]

leave a reply

your email address will not be published.

you may use these HTML tags and attributes: <a href="" title=""> <em> <i> <strong> <blockquote cite=""> <q cite=""> <cite> <pre> <code> <del datetime=""> <ins datetime="">