CSSによるInternet Explorerのバグ
CSSレイアウトがWeb制作の標準となって数年経ちますが、テーブルレイアウトとは異なりCSSは、ブラウザにより見え方が異なったり、バグが発生したりする可能性があります。
特にInternet Explorer（特に6、5）では、CSSが起因したバグが多く発生し、Web製作者を時折悩ませます。
IEで起こりうるバグ
DOCTYPE宣言やXML宣言
IE6はソースの一行目にDOCTYPE宣言を記述しないと、後方互換モード（古い形式でマークアップされたHTMLに対応）に切り替わってしまい、CSSの解釈に誤差が生じレイアウトの崩れなどが発生してしまいます。
XHTMLの場合、Web標準に準拠するのであれば、XML宣言を入れる必要があるのですが、この仕様のためXML宣言を記述しないWebサイトは多いです。当サイトも記述していません。
ボックスの幅が拡がらない
px単位で指定されたボックスは、ブラウザの文字サイズを拡大しても、それに伴って広がることはありません。ボックス幅が狭い場合、文章の折り返しが頻繁に行われて読みづらいなってしまいます。
これを解消するためには、ボックス幅をpx単位ではなくem単位で指定します。 emは1文字分の大きさを1とする相対単位で、文字サイズが大きくなれば、それに伴って1emのサイズも大きくなり、結果としてフォントサイズと連動した変化が可能となります。
画像の下に隙間ができる
画像の下に隙間が空くのは、IEのデフォルト設定がbaselineになっているからです。 下の隙間というのは、アルファベットの「g、y、j」などの下の部分を表示するための隙間です。
これを解消するには、CSSでマークアップした画像に対して、baselineの設定を変更すればよいのです。
vertical-align: top;
vertical-align: bottom;
フロートとフローとの間にコメントがあるとテキストの一部が下に複製される
フローとしているボックス内において、最後の内容物の文字が複製されて下にはみ出してます。テキストではなく背景画像だった場合、画像が複製されるケースもあります。
解消法はコメントを削除するだけ。これ以外の解決法は今のところ知りません。。
peek-a-boo bug（ピーカブーバグ）
peek-a-boo bugを直訳すると「いないいないばあバグ」です。ピーカブーバグとは、ブラウザをリロードしたり、スクロールした時に、CSSで指定したborderやbackgrund-imageが出たり消えたりするバグのことです。
解消法としては下記の方法があります。
div に line-height を指定
width または height を指定
position:relative を指定
CSSのバグは上げたらキリが無いのでこの辺にしておきます。
2chのバグを扱うスレッドのまとめサイトである「CSSバグリスト辞典」でほとんどのバグは解消できるでしょう。
