fc2ブログ

はじめてのブログデザイン

ホームページ制作の経験を活かしてブログテンプレートのデザインに挑戦!

IE6 の float 指定した時の margin バグ回避策

2007/04/16 Mon [Edit]

覚え書きです。

CSS でブロック要素に float を指定した際 marginauto が効かなくなる(左右のセンター揃えが効かなくなる)ので px などでキッチリと指定します。

しかし、IE6 のバグで float を指定した際の margin が2倍になってしまうバグがあります。
なので、IE6 用の有名な CSS ハック(*html)を使用して以下のように回避します。


*html div#hajime { /*IE6用のハック*/
	width : 450px;
	float : left;
	margin : 10px 5px; /*通常指定の1/2で指定*/
}

div#hajime { /*その他のブラウザ用*/
	width : 450px;
	float : left;
	margin : 10px 10px;
}

●結論
IE6 はフロート食べると太るから margin は半分。

CSSハック一覧表を作りました。

追記(2007/08/28)
記事へのコメントで hamaさんから貴重なアドバイスを頂きました。上記のバグの回避方法として下記のプロパティが有効とのことです。私はまだ使用させて頂いていませんが、CSS ハックで解決するよりも簡単な方法だと思いますので、この記事をご覧の方でご存知なかった方はどうぞ。

display : inline;

何か他に影響が出ないかな?なんて考えてしまう回避方法ですが杞憂で済みそうです。

CSS2 の仕様では「float を指定した要素は display の指定を無視する」

と言うことなので、Firefox と Opera などでは OK とのことでした。
後日、Mac の Safari などでも確認しましたがまったく問題なしでした!

*hamaさんアドバイスありがとうございました!勉強になりました!*

Prev
Safari の CSS ハック
Top
はじめてのブログデザイン
Next
祝!ライトブルー(水色)の FC2 ブログテンプレート完成!

Comments

displayの指定で簡単に回避できます

marginを2つ書かなくてもdisplayの指定で簡単に回避できます。
他のブラウザが仕様どおりなら問題がありません。
http://kikky.net/pc/css_bug041.html

hamaさん、はじめまして。

アドバイスありがとうございます!

display : inline;

を付けるだけで解決するとは知りませんでした。簡単で良いですね。

記事に修正を加え、次に float させた時の margin の問題に直面した時は hamaさんに教えて頂いた方法を使わせて頂きたいと思います。

本当に貴重な情報ありがとうございます!勉強になりました!

 
 
 
 
 
 
 
  非公開コメント
 

Track Backs

TB URL 

floatを使ったときにIE6ではmarginが2倍になる件

ここ2、3日ずっと後回しにしていた問題がやっと解決。CSSでfloatを使ったときに、IE6だけmarginが2倍になるバグをようやく回避できました。忘れないうちにメモっておきます。※margin-leftで10pxを指定したい場合解決策1 display:inlineを使用#testArea{ width:280p...

Top
はじめてのブログデザイン

はじめに・・・

hajime

Author:hajime
はじめまして!齢32を迎えたおっさんです。
当ブログではホームページ制作の経験を活かして、日々ブログテンプレートのデザインを勉強しています。ご意見ご質問アドバイスなどありましたら、お気軽にコメントください!

ブログテンプレートのご使用についてをご覧頂けると注意点などをご確認いただけます。

ブログテンプレート一覧表では、今迄当ブログで制作してきたテンプレートをご覧頂けます。

はじめてのブログデザイン記事一覧で、気になる記事を探してみませんか?

はじめてのブログはFC2ブログで良いと思うに一票。

Mail Address

Google AdSense

RSSフィード

便利なブックマーク

リンク

ロックオン


ドメインが増えてきたので引っ越し検討中のレンタルサーバー。

カテゴリー

タグクラウド

検索フォーム

最近の記事

最近のコメント

最近のトラックバック

お気に入り

EIZOダイレクト
私の中で出ている1つの答え。それは液晶モニターに関しては今も昔もこれからも EIZO(ナナオ)。

ドメイン検索
a
.com .net .info .mobi