CSSのバグリスト的なもの。

CSSでレイアウトする時問題になるのが、ブラウザ間のCSSの実装の差異（バグなど）だが、つまずきやすいポイントを簡単にまとめてみた。また、CSSレイアウトの基本的なテクニックも紹介。

CSSレイアウトの基礎

• レイアウトする際は管理し易いように、positionかfloatに統一する。（ブラウザの実装上floatを推奨）
• 不用意にpositionやfloatを使わず、なるべくmarginやpaddingで対処する。
• win、macではフォントの大きさが異なるので、ある程度ゆとりを持たせてデザインする。
• marginは前後または親子の要素間で相殺する場合としない場合がある（IE6互換以下ではこれに関するバグが多い）ので、思い通りにレイアウトできない場合はpaddingでの指定を試すのもありかも。

Opera8.x バグ

• #container #nav #flash{display:block}
  というように文脈的セレクタ記法だと、javascript（DOM）が正常に動作しない可能性あり。この場合は単純に、
  #flash{display:block}
  と置き換えることで動作する。（プルダウンナビを作る時はまった。。。）

IE6 バグ

• XHTMLでページを記述する際、xml宣言を行うと（正確にはDOCTYPE宣言より先行して何らかの文字を入れると）互換モード（IE5.xに近いモード）になってしまう。（文法的にはxml宣言を行うほうが正しいので指定したほうがいい。IE5をターゲットブラウザにするのであれば宣言するデメリットは無いわけだし。）

IE5、IE6互換モード バグ

• CSSの正式な仕様ではwidthは純粋に内容自体の幅を示すのに対し、IE6互換モード、IE5.xでは「内容+パディング+枠線」を示す。
• smarll、largeなどの相対フォントサイズが他のブラウザより大きい。px指定などで回避する。（javasciprtで文字サイズの変更をできるようにするのが好ましい。）
• 先に挙げたようにmarginの相殺に関するバグが多く見られる。
• floatされる要素の親要素にもwidthを指定しないと（CSS２の仕様では親にはwidthを指定しなくてもOKだったはず。）不具合が起こるの可能性あり。

IE5.01 バグ

• テキストを非表示にして画像だけを表示させたい時に使うテクニックの一つに
  text-indent:-9999px;
  が挙げられるが、この指定をa要素に対して行うと、背景画像とリンク領域がテキストと一緒に画面の外に追いやられてしまう。
• インライン要素（テキスト）にマージン、パディングが適用されない。

firefox1.5 バグ

• IE5.01と同様にtext-indent:-9999px;をa要素に指定した場合、これをアクティブな状態にすると不要な枠が表れる。

mac IE バグ

• clearを指定している要素にfloatを指定しても無効化される。wrappingするなどの対策が必要。
• positionとfloatを併用すると大きくレイアウトが崩れる恐れ有り。