アファメーションで独立・起業・夢実現。「いきなり!社長宣言!!」-“夢は口に出すことで実現する!”というアファメーション:ライブラリー

2010年4月30日

cssで要素をfloatするとき画像でブレットを表示させてるときに困ることへの対処方法。

夢実現のアファメーションを実践する起業家にもっとも読まれているブログは?

CSSのお題。

画像とかを、floatで「回り込み」をさせるとき、ブレットを背景画像で表示させている要素があると、画像を左寄せにすると困ることが。

画像を右寄せにするときは特に問題はないんだけど、それを左寄せにすると、その要素の周辺で背景画像でブレットを表示させている場合、そのブレットが画像(回り込みをさせた要素)の下に潜り込んでしまい(というか、floatした要素が文字通り「浮いて」しまうので)、表示されないという事態が。

...と、文章で書いてもイマイチ伝わらないので、サンプルを作りました。

サンプルをいくつか。

http://www.businemotion.org/test/css_sample/float_bullet/

上記で言ってた「困ること」とは、(1)の状態。
(左寄せにした画像の下にブレットが潜り込んでしまっている。⇒画像がfloatして(浮いて)いるので)

...というか、本来CSSの解釈は合ってるから、本来(1)のようになる(ブレットが左側のまま)のは当たり前なんだけど...みんなどうしてます?

って、Twitterでつぶやいたら、某君から

『ブレット(背景画像)を設定した要素に「overflow:hidden;」を指定するのはどうか』

...という返信が。

んで、試してみる(4参照)と、(1)のソースのままでも意図したとおりに「回り込み」ができました。
(パチパチ)

htmlのソースも汚さないし、属性一個で実装できるので、これがいいかも。

※他にもいい案や「オレはこうしてるぜ!」ってのがあれば引き続きお待ちしておりやす。

追記:2010/05/02

IE6で確認したら、(4)はやっぱりダメだった。
(3)についてはOK。

ってことで、IE6を対象にするならば(3)で、それ以降でOKならば(4)がいいかも。

と思ったけど、さらに追記

上記(4)のddにIEの独自プロパティ「zoom:1;」を入れると、(4)でもOKになりました。
なので、やっぱりoverflow:hidden;(autoとかでも大丈夫)を使い、さらにIE用にzoom:1;で、意図した通りブレットを表示させることができます。

現状、IE6、IE8、FF3.6.x、safari4.05、chrome4.1で確認。(※すべてWin)

この記事に関連する(かもしれない)書籍

 

投稿者 kuro : 2010年4月30日 23:00 | ID:826

ページトップ△

ページトップ△