http://whisper.sakura.ne.jp/diary/2009/06/cssfloat.html
すぐ忘れるのでメモ。
空タグを使わない方法については float する対象をコンテナで囲むのは共通。
コンテナに対して clearfix (:afterに見えない要素を置いてそこでclearする)を使うか、
overflow:hidden をかけるかの2パターン。
参考:
– floatのclearについて
図解で分かりやすいです。
– clearは「floatの解除」ではない
タグ: CSS
各ブラウザのスタイルシートデフォルト値
Internet Explorer User Agent Style Sheets
IE6,IE7,IE8,IE9と、Firefox,Webkit,Opera の最新版のデフォルトスタイルシート。
特にIEについては比較表になっていて便利です。
table から div へ
.tr{ clear:left; }
.td{ float:left; }
と指定すれば、
<div class=”tr”>
<div class=”td”>foo</td>
<div class=”td”>boo</td>
</div>
のように簡易的に列揃えの疑似テーブル構造ができます(行揃えはなし)。
過渡期の置き換え作業の際はこのように td, tr クラスを作るのもいいかもしれません。
参考:
– CSS による段組(マルチカラム)レイアウト講座
– CSSリファレンス(実験室:P)
– テーブルを使わずにCSSでいこう
IE と Firefox の互換性を高める
CSS バグ辞典
http://members.at.infoseek.co.jp/cssbug/index.html
特に IE について、けっこうな量の不具合があるのだなぁと改めてびっくりです。
例えば vertical-align 周りの動作の怪しさはずっと気になっていたので、検証コードで確認できてすっきりしました。
参考:
– CSS テクニックコミュニティ(mixi)