スポンサードリンク

IE6でcss枠がずれるのは、floatとmarginが原因


Internet Explorer6でCSSの枠がずれる。


floatとmarginを組み合わせた時は、display:inline;も記述する。

 一般的に、サイトやブログでカラム表示にする場合、
その囲い枠はTABLEタグではなく、CSSで作ります。
 この枠の幅設定(width)が適切の場合、IE7以降のバージョンやFirefoxなどでは、
きちんと表のような枠が出来上がるのですが、
IE6ではデザインが崩れ、枠内からはみ出ることがあります。
つまり、設定した枠内に収まりきらない症状が起こります。
 スポンサードリンク
原因は、floatを設定したタグにmarginを組み合わせると、
marginが2倍の数値になるバグがIE6であるようです。
例えば、以下のような記述で発生します。

.box-01 {
   float: left;
   width: 450px;
   margin: 10px;
   border: 1px;
}

これを解決する場合、
「.box-01」の中にdisplay:inline;を入れると修正されるようです。

.box-02 {
   float: left;
   width: 450px;
   margin: 10px;
   border: 1px;
   display: inline;
}

他にも、ブラウザ別にCSSを用意する方法がありますが、こちらの方が手っ取り早いです。
コメント
コメントの投稿

コメントを非公開にする

トラックバック
トップページへ

お知らせ

管理人:メモル
調べたことなどを、わかりやすくまとめて行きます。
ブログ概要はこちら。
相互リンクは随時募集中ですが、申し込み方法を確認して下さい。

スポンサードリンク

検索フォーム


最新記事

メールフォーム

名前:
メール:
件名:
本文: