clearfix

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

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


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

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

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

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

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

2007年11月26日 23:24 サンレシステム | 個別ページ | コメント(0) | トラックバック(0)

トラックバック(0)

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

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

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

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