CSSテクニックコミュのMacIEでの回り込みについて

検索したりトピを探したのですが、
自分で見つけられずトピ立たさせていただきます。
<dl></dl>
を使用したリストを作ろうと思ってるのですが、
<dt></dt>
<dd></dd>
ともにfloat:left;を入れたのですが、
MacIEのみ回り込み出来ませんでした。
今までこのような現象に陥った事がないので、教えていただけたら幸いです。
*CSS*
div#mainBlock dl{
width:462px;
background:#ffffbf;
margin:3px 0px 0px;
clear:both;
}

div#mainBlock dl:after{
content:".";
display:block;
height:0px;
clear:both;
visibility:hidden;
}

/* MacIE用 */
div#mainBlock dl{
display:inline-table;
}

/* Hides from IE-mac \*/
* html div#mainBlock dl{
height:1%;
}

div#mainBlock dl{
display:block;
}
/*End hides from IE-mac */

div#mainBlock dl dt{
width:150px;
background:#ffffbf;
padding:10px;
float:left;
}

div#mainBlock dl dd{
width:272px;
background:#ffffff;
padding:10px;
float:left;
}

*HTML*
<dl>
<dt>テキストテキストテキスト</dt>
<dd>テキストテキストテキスト</dd>
</dl>
<br class="clear" />

もし、重複していたら大変申し訳ないですが、よろしくお願いします。

コメント(10)

最初
全て
最新の40件

[1] mixiユーザー 11月06日 19:41

解決策ではなくて申し訳ありませんが、私も同じような現象になっています。

私の場合は、ul､liを使用しています。

少し前にどこかで解決策を見た気がしますが、現状はそのまま放置になっています。

今は携帯からなのでわかりませんが、後でもう一度調べてみます

[2] mixiユーザー 11月06日 19:51

のぶさん＞
ありがとうございますっ
初めてこういう現象が出て、
色々と策を考えたのですが、
解決策が見つからなかったです。
classを指定しすぎると同じ事になった事はありますが……
今回は、特にdlにclassを指定してないので何故なのか気になります。

ul liの場合

margin-bottom:0px;
margin-left:0px;

を入れたら回り込みされるとかのような気が……
曖昧なため違うかもしれないですが、
ulに入れたら直った気がします

[3] mixiユーザー 11月06日 20:00

div#mainBlock dl{
width:462px;
background:#ffffbf;
margin:3px 0px 0px;
clear:both;
}

から

clear:both を取ってみるとか。

[4] mixiユーザー 11月06日 20:10

解決法ではありませんが、症状としては「clearを設定した要素の子要素では同じ方向のfloatが効かない」というMac IEに特有のバグだと思われます。

http://cssbug.at.infoseek.co.jp/detail/macie/b015.html

[5] mixiユーザー 11月06日 20:12

ブンタさんも言われてますが、確かMacIEにはfloatさせる要素にclearを追加するとfloatしない、というバグがあったと思います。なので、もしかしたら親要素のdlにclearを指定してるからかもしれません。

[6] mixiユーザー 11月06日 20:28

ブンタさん、saito-kazuoさん、えどさん＞
レスありがとうございます
clear:both;を消したら直りました！ありがとうございます。
ですが、
dlが途中で途切れたりするって現象が出てるようなのですが、
これに関する解決策とかもありますか？

たびたびで申し訳ないですが、よろしくお願いします。

[7] mixiユーザー 11月06日 20:35

<dl>
<dt>テキストテキストテキスト</dt>
<dd>テキストテキストテキスト</dd>
</dl>
<br class="clear" />

から

<br class="clear" />
をとったらどうでしょうか？

[8] mixiユーザー 11月06日 20:47

テツさん＞
レスありがとうございます！
えっと、説明不足で申し訳ないです。
border:solid 1px #ff0000;
でdlを枠囲んだ場合、
頭の何ピクセルかしか、囲まれないという形になってしまいます。

[9] mixiユーザー 11月06日 20:53

それは、dl内の要素がfloat（浮いてる）してるために
dlのボックス内に要素がない、という認識になってるためですね。
なので正常な動作です。

以下を追加すると解決するかもしれません。

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

* html dl{/* for IE */
　/*\*/ height: 1%; /* for WinIE */
　display: inline-table; /* for MacIE */
}

[10] mixiユーザー 11月06日 21:14

えどさん＞
度々ありがとうございます！
なんとか直りました。
ありがとうございます。

ログインすると、みんなのコメントがもっと見れるよ