hasLayout を false にするには

hasLayout が true のときに意図しないレンダリング結果になってしまうことがあります。例えば hasLayoutプロパティがtrueで発生するバグ - Webtech Walker が参考になります。

hasLayout をうまくコントロールしながら構築すればよいのですが、継承により必然的に hasLayout が true になってしまうことがあります。これを false にする方法をまとめました。

継承などの都合で一度 hasLayout を true にしてしまった要素の hasLayout を false にするには、hasLayout を true にするトリガーを規定値 (一部除く) に戻します。(規定値で上書きするというよりは、特殊なことをすると hasLayout が true になるから特殊なことをする前に戻してあげるといった感じ)

hasLayout が ture になるプロパティーと値は以下の通りです。

CSS プロパティー	値
display	inline-block
height	any value
float	left or right
position	absolute
width	any value
-ms-writing-mode	tb-rl
zoom	any value

これらを規定値 (一部除く) に上書きすればよいので

CSS プロパティー	値
display	block または inline
height	auto
float	none
position	static または relative
width	auto
-ms-writing-mode	lr-tb
zoom	normal

を設定します。

例えば、以下のコードのように　clearFix などの目的で一度 hasLayout を true に設定した場合があるとすると…


div.section{
	zoom:1;
}

特殊なケースの都合で hasLayout を false にしなければいけないときは


div#example div.section{
	zoom:normal;
}

のように規定値で上書きします。すると、この div#example div.section は hasLayout が flase でレンダリングされます。

demo

ただし、body, img, object, hr, input, button, textarea, table, tr, th, td, frameset, frame, iframe, marquee などは常に hasLayout が true なので、絶対に false にはできません。

トラックバックURI

http://www.yomotsu.net/lab/css/tips_haslayout-false/trackback

hasLayoutメモ | css | understandard.netさんからのコメント

2009年10月20日 17:52

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

コメントフォーム

実験室に戻る

このページの目次