float時の表示バグ対策
flat…便利といえば便利なのですが、これを使うといろいろと問題が起きる事が…(^^ゞ
中でも解除がうまくいかないときに便利なのが以下の方法です。
<div id="box">
<dl class="left">
<dt>タイトル1</dt>
<dd>中味その1です</dd>
</dl>
<dl class="right">
<dt>タイトル2</dt>
<dd>中味その2です</dd>
</dl>
</div>
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;」は、ブロックボックスでありながらインラインに流し込まれるようなスタイルを指定するものだそうです。