float後、最後の文字が改行されて表示されるIEのバグの解消法　|　楽してプロっぽいデザイン

Webデザインセンスや多少知識が乏しくとも、プロっぽいデザインにできる方法があります。Web制作を助けてくれる便利なサイトの備忘録ブログ。

float後、最後の文字が改行されて表示されるIEのバグの解消法

IE上で上記のように、最後の文字が改行されて重複して表示されることはありませんか？これまで何度がこのような場面に直面したことはありますが、その度に解消法はどうだったかと調べていたものです。先日もサイトを制作していてこの状況に陥りましたので、今後のためにも解消法をメモしておきたいと思います。

IE6でこの現象が起こると思われます。全部チェックはできていませんm（_ _）m

バグ解消法

構造は下記のような感じにしています。

サイト全体をwrapperとして、その中にcontentsというボックスを設置します。そのcontentsの中にleft_box、center_box、right_boxをそれぞれfloat:left;で配置しています。

ちなみにサイズはwrapperは横幅720px、その中のcontentsも720px、3つのボックスは、それぞれ横幅230pxに設定し、left_box,center_boxにmargin-right:15px;を設定（230+15+230+15+230）で計720pxになるように設定しています。通常だとこれで綺麗に配置されるはずですが、IEだとバグが発生してしまいます。

IEでのバグを防ぐ方法

ポイントはcontentsの横幅です。720で設定と書きましたが、ここを723pxで設定します。（3px増やします。）するとこのバグが解消されます。

cssのソースは下記のような感じです。

*{font-size:12px;}
p{line-height:160%;}
#wrapper{width:720px;}
.contents{
	width:723px;
	float:left;
	clear:both;
	}
.contents .left_box{
	width:230px;
	float:left;
	margin:0 15px 0 0;
	}
.contents .center_box{
	width:230px;
	float:left;
	margin:0 15px 0 0;
	}
.contents .right_box{
	width:230px;
	float:left;
	}

参考までに1～3までの内容を反映したファイルを添付します。

タグ:【　バグ　】

| パーマリンク | コメント (0) | トラックバック (0) |

楽してプロっぽいデザイン|Forty-N-Five Blog Trackbacks

このエントリーのトラックバックURL

float後、最後の文字が改行されて表示されるIEのバグの解消法の前後の記事

前の記事は「フォトショップを使わずにアクアボタンをあっという間に作れるフリーソフト」

次の記事は「Photoshop（フォトショップ）で自然な雲を描く方法」

Name:
Mail:
URL:
	この情報を登録しますか?

Webデザインセンスや多少知識が乏しくとも、プロっぽいデザインにできる方法があります。Web制作を助けてくれる便利なサイトの備忘録ブログ。