徒然 - blog

前回書いたものは、

IE6でも、

ネガティヴマージン（-400px）をとったもの（wrapper2）を、

位置合わせ用マージン（400px）を持つ領域（wrapper1）で囲むことによって、

幅の最小値（400px）を実現させました。



たぶんこれは、例えばwrapper2が600pxになったとき、

600-400+400＝600となるけど、

400pxより小さくなった場合、例えば300pxでは

300-400+400

=(300-400)+400

の（）内がマイナスの値を取らず0と計算するからだと思うのですが、

ここでは、ドキュタイプ宣言をしっかりしたり、「position:relative」を使わねばなりませんでした。





そこで、別のやり方。



固定幅の領域をつっかえ棒のように用意して、それ以下に幅が縮まないようにする書き方です。





（参考）

http://mb.blog7.fc2.com/blog-entry-122.html

http://blog-imgs-27-origin.fc2.com/m/b/m/mb/min-width.html

<style type="text/css">
#wrapper1 {
	zoom:1; /* IE6のhasLayoutをtrueに */
}

#wrapper2 {
	width:100%;/* 幅が必要 */
	min-width:400px; /* IE6以外用*/
}

#forIE6 {
	width:400px;/* IE6用最小幅 */
}
</style>



<div id="wrapper1">
	<div id="wrapper2">
		<div id="forIE6"></div>
		【↑「forIE6」がつっかえ棒的な役割を果たす】【↑「forIE6」がつっかえ棒的な役割を果たす】【↑「forIE6」がつっかえ棒的な役割を果たす】【↑「forIE6」がつっかえ棒的な役割を果たす】【↑「forIE6」がつっかえ棒的な役割を果たす】【↑「forIE6」がつっかえ棒的な役割を果たす】【↑「forIE6」がつっかえ棒的な役割を果たす】【↑「forIE6」がつっかえ棒的な役割を果たす】
	</div>
</div>

んんんー、でもこれは直感的には分かりやすいけど、ソース的に美しくないし、後々のメインテナンスのことを考えると、以前書いたほうが良いかも。

結論だけ書くと、

.clearfix:after {
	content:"";
	display:block;
	clear:both;
	height:0;
	visibility:hidden;
}

.clearfix {
	min-height:1px;
}

* html .clearfix {
	height:1px;
	/*\*//*/
	height:auto;
	overflow:hidden;
	/**/
}

 

 

詳しくはclearfixでfloatを解除 | d-spicaを参照。

 

IE対策のポイントは、以下のバグ。

• 要素の幅か高さを指定した場合，floatした子要素の高さも含めて算出する
• 要素の幅と高さが内容物に合わせて押し広げられる（→min-heightなどに応用できる）

モダンブラウザも含め、本質的なポイントは「floatした要素の高さを親要素の高さに反映させたい」という発想ですね。

少し話題がずれてちなみに、クラスの複数指定は便利ですが、IEを考慮してなるべくしない方が無難かと思います。

（参考）IE6で複数クラスを使う時の注意点 | CSS-EBLOG

それと、floatは「回り込み」ではないことを理解すると、応用が効くと思うけど、「回り込み」と理解してもたいていは大丈夫かと。でもはやり、「回り込み」のつもりで書くと思うように行かないことがあるので、正しい理解は必要だと思います。（IEは「回り込み」として表示。これはバグ）