画像が消えたり、繰り返さなかったり系が解決しそうなこと

たぶんこのサイトの何処かを探せば、IE以外で背景が繰り返さないとか、IEだけ文字が消えちゃうとかって類いについて書いてあるはずなんすが、ボク自身も何処に有るのか分からないので、適当に有りがちな部分をまとめてみました。

取りあえず↓こんな状態よくあるかと。

上記で指定してるスタイルは下記。

#main .entryBody #sample070219_01 {
	width:200px;
	margin-bottom:1em;
	padding:5px;
	background:#FFF;
	border:1px solid #999;
}
#main .entryBody #sample070219_01 img {
	margin-right:10px;
	float:left;
}

コレはIEだとちゃんと表示されますが、floatの解釈が正しいブラウザでは意図した状態とは違うはずです。（理解している人はコレが意図した状態ですが）

ということで、そういう系を解決してきます。

画像とか用意するの面倒なんで、IE6とFirefox2辺りで見比べていただけたらと思います。

---- こっから続き

clearfixで解決させる

clearfixが一番手っ取り早い感じもしますね。

解決してますよね？

#main .entryBody #sample070219_02:after {
    content:".";
    display: block;
    height:0px;
    clear:both;
    visibility:hidden;
}

clearfixについてはこっち↓
http://css-happylife.com/log/css-hack/000078.shtml

clearfixは、かなり利便性が高いので、2段組とかでIE以外で背景が繰り返さないという場合にも使えます。
（やってる事は同じなんだけど、感覚的に違うかなと）

親要素にfloatを指定する

clearfixを知るまではもっぱらこの方法。
今でもボクはメインで使う方法ですが。

スタイルは下記の太字部分です。

#main .entryBody #sample070219_03 {
	width:200px;
	margin-bottom:1em;
	padding:5px;
	background:#FFF;
	border:1px solid #999;
	float:left;
}
#main .entryBody #sample070219_03 img {
	margin-right:10px;
	float:left;
}

コレも2段組でサイドの背景が繰り返さないといった時も同様に解決できます。

参考になりそうなエントリーはこっち↓
http://css-happylife.com/log/css-template/000028.shtml

overflow:hiddenを指定する

当時裏技だと思ってた方法です。

スタイルは下記の太字部分です。

#main .entryBody #sample070219_04 {
	width:200px;
	margin-bottom:1em;
	padding:5px;
	background:#FFF;
	border:1px solid #999;
	overflow:hidden;
}

…ココまで来て気付く。
地味なエントリーだ…中の人は必死なのに…

結局よく原理が分かってないんですが（誰か教えて下さい）、floatだと稀にレイアウトが崩れてしまうので、その時に使える手段の一つです。
こちらも同様に2段組などで使えます。

このサンプルは、width指定しているのでIEでは、意図している状態で全て表示されるハズです。
この原因は、hasLayoutっていうIEの独自拡張に原因があります。

hasLayoutについてはこっち↓
http://css-happylife.com/log/bug/000095.shtml

2段組での背景画像が繰り返さない件は、最初のサンプルをfirefoxで見ればなんで繰り返さないか分かると思います。
あのサンプルは画像の方が高さがありますが、同じ事です。

段組みとコンテンツ内の一部をfloatした場合で状況が違うような気がしてしまう事も有るかと思いますが、解決方法は同じだったりします。

IEで文字が消えたりする件について。

今度はさっきとは別の方向でIEバグ関係に。

守護樹バナーの右に跡地っていうテキストがあるんですが、IEだと消えているハズです。（消えてない場合リロードすれば消えると思います）
コレも時々はまる系な気がします。

該当部分を選択するか、守護樹バナーにカーソルを合わせれば表示されるのが確認できると思います。
画像にカーソル合わせると表示されるのは、hasLayout絡みなのかなぁ。
そしたら、「リンク画像にカーソルを合わる」ってのがトリガーになってるのかも。

解決方法は、widthを指定するか独自拡張のzoomを指定する等がございます。

#main .entryBody #sample070219_06 {
	margin-bottom:1em;
	padding:5px;
	border:1px solid #999;
	background:#DDD;
	zoom:100%;
}

IEに関しての変な表示は大半がwidth指定で解決出来ます。
float指定をしている以上width指定をするはずですが、まぁ状況にもよるので、そういう場合はzoomを使うとかで解決すると良い感じです。

各種SBMに追加

• 
• 
• 
• 
• 
• 
•