CSS

FirefoxやSafariなどモダンブラウザにも対応したclearfix

clearfixの書き方は色々ありますが、以前使っていたやつでSafariやFirefoxで表示した際、下に隙間ができるケースがあります。

どうやら

line-height:0;

を追記すると解決できるようです。

というわけで、現時点での決定版。

div{
zoom:1;/*for IE 5.5-7*/
}
div:after{/*for modern browser*/
content:".";
display: block;
height:0px;
clear:both;
line-height:0;
visibility:hidden;
}

参考：http://kennsu.jp/2008/11/cssclearfix.html

関連する投稿

関連する投稿

  • 関連する投稿はありません

Jimdo

シェア！

オススメ書籍

10日でSEO＆アクセスアップ Jimdoデザインブック

かっこいいだけではなく、人が集まるホームページを作る！

「Jimdo」（ジンドゥー）でのホームページの作成方法と運用方法を解説した書籍。解説記事を順番に読み進めて行くことで、Jimdoを使ったホームページの作成・運用・宣伝・集客の基本を、10日間で習得するのが本書のコンセプトです。12章構成の解説の中で、Jimdoの基本操作とホームページの作成、デザインとコンテンツ（内容）のレベルアップ、そしてSEOやリスティング広告を含む宣伝・集客の基本を解説しています。

10日でSEO＆アクセスアップ Jimdoデザインブック

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA


ABOUTこの記事をかいた人

株式会社マジカルリミックス 代表取締役CEO/JimdoExpert 宮城県出身。コンピューター系の専門学校を卒業後、仙台のデザイン会社に入社。 Webサイトのデザイン・コーディングをはじめとし、各種デジタルメディアのデザインに従事。2002年退職後すぐにマジカルリミックスを創業。2007年に法人化で株式会社マジカルリミックスを設立。Webサイト運用に関するコンサルティング、社内向けITトレーニング、セミナー出演、執筆など。2005年から仙台の専門学校で、非常勤講師としてWeb制作講義を担当。 主な著書に『10日で作るかっこいいホームページ Jimdo(ジンドゥー)デザインブック』（エムディエヌコーポレーション）『HTML5+CSS3の新しい教科書 基礎から覚える、深く理解できる。』（共著、同）『基礎から覚える、深く理解できる。Webデザインの新しい教科書』（同）。

NEW POST最新の記事

RECOMMENDこちらの記事も人気です。