2008年9月22日月曜日

 

【CSS】IEのhasLayoutプロパティまとめ

IEでのCSSのバグを回避するhasLayout -
hasLayoutとは何か -
IEのバグでfloat要素がはみ出たり重なったりすることがあります。
これはIE独自のhasLayoutというプロパティの為です(レイアウト崩れの原因)。
hasLayoutはデフォルトではfalseになっており、幅や高さが他の要素のレイアウトに影響されて伸び縮みし、他の要素と重なってしまう場合があります。
これを解決するために、「hasLayout=true」にします。
hasLayout=true」を設定するCSSプロパティは以下の通りです。(参照:MSDNのドキュメント
「hasLayout=true」にするCSSプロパティ
プロパティ
displayinline-block
heightany value
floatleft or right
positionabsolute
widthany value
writing-modetb-rl
zoomany value
CSSテクニックやハックとしてよく紹介されるHolly hackや「zoom:1」の根拠はこれです。
// Holly hack
/* Hides from IE5-Mac \*/
* html .foo { height: 1%; }
/* */

zoom: 1;
hasLayout問題を解決するzoom:1;の落とし穴 - Like@Lunatic
全称セレクタにzoomを使うとバグる - ikesai.com
しかし、この便利な「zoom:1」を全称セレクタに使うには注意が必要です。

* {
 margin: 0;
 padding: 0;
 zoom: 1;
}
意図しないところでclearされて別のレイアウト崩れが生じてしまいます。
zoom:1;clearfixにも記述されています。
これを回避するにはclearさせない要素に「zoom: normal;」とすると良いようです。

zoom: normal;
テスト用には全称セレクタが便利ですが個別に指定した方が良いのかも知れません。

ラベル:


コメント: コメントを投稿

登録 コメントの投稿 [Atom]



この投稿へのリンク:

リンクを作成



<< ホーム

This page is powered by Blogger. Isn't yours?

登録 投稿 [Atom]

Google