« 携帯サイトとクローラ | メイン

hasLayoutとは何か このエントリーをブックマークに追加

yamaokaです。

CSSに携わっている方なら、Holly hackを使ったことがあるかもしれません。

/* Hides from IE5-Mac \*/
* html .foo { height: 1%; }
/* */

Internet Explorer(以下IE)で、レイアウトに問題のある要素に 上記のようなスタイルを指定をすると、 あら不思議、まともな表示がなされるというものです (上記のままではIE7に対応していませんが…)。

さて、どうしてレイアウトが意図したとおりに行われるようになるのでしょうか。

IEのhasLayoutプロパティ

IEでは、全ての要素が 「hasLayout」という読み取り専用のプロパティを持っています。 これはそれぞれの要素がレイアウト情報(=要素の幅・高さなどに関する属性情報)を 保持しているかどうかを示す値で、 デフォルトの状態では「hasLayout = false」です。 「hasLayout = false」の場合、幅や高さが他の要素のレイアウトに影響されて伸び縮みし、 表示が他の要素と重なってしまう場合があります(レイアウト崩れの原因)。

hasLayoutの値を調べたい場合、IE Developer Toolbar で要素を選択すれば確認することができます(ちなみに、「-1」というのが「hasLayout = true」の状態で、 「hasLayout = false」の場合、hasLayoutプロパティ自体表示されません)。

hasLayout
hasLayout posted by (C)フォト蔵

hasLayoutの値を切り替える

「hasLayout = false」の状態でレイアウトが崩れる場合、 「hasLayout = true」に値を切り替えると問題が解決する場合が多いです。 切り替える方法ですが、CSSの特定のプロパティに下記のような値を指定することで可能なようです (MSDNのドキュメントによる)。

プロパティ
displayinline-block
heightany value
floatleft or right
positionabsolute
widthany value
writing-modetb-rl
zoomany value

hasLayoutとの付き合い方

冒頭で掲げたHolly hackは、 heightをスタイルで指定することで「hasLayout = true」に切り替え、 レイアウト情報を要素に持たせるための工夫だったわけです。 IEでレイアウト崩れがどうしても直らない場合、 hasLayoutの値を確認してみるといいかもしれませんね。

最後に、記事を書く上で参考にしたサイトを挙げておきます。

トラックバック

このエントリーのトラックバックURL:
http://www.unoh.net/mt32/unoh-mt32-ja-tb.cgi/969

コメントを投稿


求人情報転職アルバイト

SaaS提供の高性能CMS RCMS
SaaS提供の高性能CMS
ウノウラボはウノウ株式会社のエンジニア/デザイナーによる大小のアウトプットを行っていく場です。

現在ウノウは絶賛人材募集中です。詳細は求人ページへ。



About

2007年09月28日 17:11に投稿されたエントリーのページです。

ひとつ前の投稿は「携帯サイトとクローラ」です。

他にも多くのエントリーがあります。メインページアーカイブページも見てください。

ウノウサービス