clearfix

divタグとfloatを使ったシンプルな2コラムデザインを手がけましたが、背景が重要だったため、各ブラウザで表示を統一するのに手こずりました。ネットで検索したり、過去の「Web creators」を読み直したりしてなんとか解決しました。

第1ポイントとしては、clearfixという手法です。


.clearfix{zoom:1;}
.clearfix:after {
 content: "."; 
 display: block; 
 height: 0; 
 clear: both; 
 visibility: hidden;
}

特にIE用のzooomの効果には感動しました。

第2ポイントは、IE6用にfloatを設定したdivのボックスにdisplay:inline;を指定することです。 この設定をしないとIE6では、marginの値が倍になってしまう痛?いバグがあります。

結果だけ見るとなんてことないのですが、やはり各ブラウザ間で表示を統一するのはしんどいですね。サンレシステムでは、動作検証としていずれもWindows版の最新バージョンで

  1. IE7
  2. IE6
  3. FireFox
  4. Opera
の4つで行っています。これでほぼ大丈夫だと思いますが、あとSafari入ればさらにバッチリ。Mac環境は現在構築中です。実用まではあと少し。。。

カテゴリ:

| | コメント(0) | トラックバック(0)

トラックバック(0)

このブログ記事を参照しているブログ一覧: clearfix

このブログ記事に対するトラックバックURL: http://www.3re.jp/mt3re/mt-tb.cgi/15

コメントする


画像の中に見える文字を入力してください。

このブログ記事について

このページは、サンレシステムが2007年11月26日 23:24に書いたブログ記事です。

ひとつ前のブログ記事は「意外に知らないキーボードのボタン」です。

次のブログ記事は「PHPとCRONで、XREAの生ログをすっきり!」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。

Powered by Movable Type 4.22-ja