CSSレイアウト時のよくやる失敗と対処法

• floatでレイアウトしたときのボックスの間に隙間が出来る
  →隙間が出来るボックス要素全てに float 要素を追加


• <div>内に配置した<img>が<div>よりサイズが小さいと隙間が出来る
  → 下記を追加 img { display: block; }


• Win IEだけずれる時があり、ずれる大きさがフォントサイズによって変わる
  →ずれる<div>等に vertical-align を設定する（top 又は bottom）


• <td>内のフォントが正しく指定したとおりでない（Win IE Mac IE）
  →<td>の中に<span>をいれて対応する


• MacIEで<div>を floatさせると表示が崩れる。
  → フロートさせるdiv の width height 属性を指定する


• <ul><li>で画像リンクを作成したときに WinIEでフォントサイズを変更すると 隙間が出来てしまう
  → overflow:hidden; font-size:1px; を追加
  line-height プロパティ値をチェック


• Windows版 IE 6 で 高さ 1px の div が作成できない。（10pxくらいのdivになってしまう）
  →height:1px; overflow:hidden; と記述する。


• Windows版 IE 6 で float 時の margin が 2倍に解釈されてしまう。
  →display: inline;　を加える （CSS2 の仕様では「float を指定した要素は display の指定を無視する」のでほかのブラウザでもOK）
  float: left; display: inline; を1セットと覚えておくと楽。


• Windows版 IE 7 でcssのみでブロック要素をセンタリングできない。
  → センタリングしたい要素に　margin:0 auto;
  → 親要素に text-align: center; （厳密にはIEのレンダリングモードによるのでまずそれをチェックすること）

参考
http://logic.stepserver.jp/data/archives/157.html