clearfixとoverflowと、display

スポンサーリンク

※本サイトにはプロモーションが含まれています

訓練校で、floatした際の親要素に
overflow:hidden;
を入れるという神業を教えてもらい、
以降愛用してたのが…

先日それが効かない場面に遭遇。
いや、効いてるんだけど、子要素がちょん切れるという現象。

う〜んどーしたもんかと思い、
overflowの代わりにclearfixを使ったが、やっぱりちょん切れる。

ちなみにその切れてしまう子要素は、pタグに
display:inline;
border:2px solid #333333;

をつけたもの。
文字をワクで囲いたかったのね。

で、そのp要素の上のborderが切れてしまうのだけれど…

overflow: hidden;を外すと
子要素は見えるけれど、親要素の高さが出ない。

結局どーやって解決したかというと、p要素の
× display:inline;
○ display:inline-block;
にしました。

でもこれだとIE7では見れないんだーーーー(泣)

無限ループにはまってます(泣)

コメント

タイトルとURLをコピーしました