Topテクニックメモスタイルシートネタ > float時の表示バグ対策

float時の表示バグ対策

flat…便利といえば便利なのですが、これを使うといろいろと問題が起きる事が…(^^ゞ
中でも解除がうまくいかないときに便利なのが以下の方法です。


* html.box{ height: 1%; }
positionや floatを使った時に、IE6で表示がおかしくなる事があります。 たいてい「width:100%」を指定すれば直るのですが…widthが使用できない場合などは、「height:1%」を指定すると直る事があります。 以下がサンプルです。

<div id="box">
<dl class="left">
<dt>タイトル1</dt>
<dd>中味その1です</dd>
</dl>
<dl class="right">
<dt>タイトル2</dt>
<dd>中味その2です</dd>
</dl>
</div>

#box{

width:100%;

}
#box dl.left{

float:left;

width:200px;

padding:0;

}

#box dl.right{

float:left;

width:200px;

padding:0;

margin:0;

}
#box dd{

display:inline;

padding:0;

margin:0;

font-size:85%;

}


/* フロート解除の設定 */
.box:after{
content: " ";
display: block;
visibility: hidden;
clear: both;
height: 0.1px;
font-size: 0.1em;
line-height: 0;
}


/* WIN用IE \*/
* html .box { display: inline-block; }
/* MAC用IEはここから適応されない \*/
* html .box { height: 1%; }
.box { display: block; }
/* */


:after
コンテンツの最後に content: " "を挿入し、それをなるべく見えない形(font-size: 0.1em;とか)で指定させた上で、「clear: both;」でクリア。
※これで「br clear="all"」と同じ効果です。
IEはafterが効かないので、WinIEとMacIEに「*html」のハックを適用させる。
※「* html」は、WinIE4以上とMacIE5以上にのみスタイルが適用させるもの。
「display: inline-block;」は、ブロックボックスでありながらインラインに流し込まれるようなスタイルを指定するものだそうです。

「float時の表示バグ対策」関連本

Akasa Rira
みつけたきせき