サイト内検索

Blog > css > hasLayoutメモ


2008.07.27

category: css

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
関連投稿

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

posted on 2008.07.27 11:08pm

Comment and Trackback
Trackback URL
Recent Faves Tagged With "haslayout" : MyNetFaves@2008年9月11日 11:20 AM

[...] public links >> haslayout hasLayoutメモ First saved by acockle | 1 days ago CSS Background Properties: Everything you could possibly [...]

Recent Links Tagged With "haslayout" - JabberTags@2008年12月16日 12:19 AM

[...] public links >> haslayout hasLayoutメモ Saved by OmegaSandShark on Sun 30-11-2008 A Semantic List-Based CSS Calendar Saved by kermix on [...]

User links about "haslayout" on iLinkShare@2009年1月28日 10:18 PM

[...] 36 days ago1 votesConfusing layout stuff, explained>> saved by choffee 41 days ago2 voteshasLayoutメモ>> saved by claypole 41 days ago2 votesCSS – Bordering on The Ridiculous>> saved by RIDZGT 45 days [...]

気ままな日記@2009年8月26日 6:01 PM

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

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