こんにちは。仕事中お菓子絶対食べるマンと化しているアンドレです。

最近はコーディング要件の対応ブラウザの最低がIE8となっていることが多いかと思います。
IE8は6や7と比べればクリティカルなバグが少なく、レイアウトで悩まされることはあまりないかと思うのですが、それでも厄介なバグは確かに存在します。
今日はIE8に仕掛けられた落とし穴についてお話しします。

imgにmax-width:100%を指定すると表示されないことがある

レスポンシブ対応等でimgにmax-width:100%を指定する場合、基本的には問題ないのですが、floatの影響を受けていると、imgの幅と高さが0となって表示されないことがあります。

対処法

floatを指定している親要素もしくはimgに幅（autoでも可）を指定する。

擬似要素にz-indexが効かない

IE8から使用可能であるため、よくお世話になるbefore/after擬似要素。親要素にposition:relative、擬似要素にposition:absoluteを指定して位置調整することも多いかと思います。
しかし、IE8では擬似要素にposition:absoluteが指定されているとz-indexの指定が効きません！

対処法

親要素にz-indexを指定（z-index:-1等）。

擬似要素にfilterが効かない

よく使うであろうhover時の透過フィルター等が効きません。

対処法

なし。実要素を追加する等で対処。

max-width/min-width/max-height/min-heightはbox-sizing:content-box（デフォルト）の状態で計算される

これまたIE8から利用可能で、ボックスモデルの計算が必要なくなるため非常に便利なbox-sizing:border-box。
しかし、max-width/min-width/max-height/min-heightと併用すると無視されてしまいます。

対処法

box-sizing:content-box状態で計算する。

:first-child問題

リンクのクリックにより要素が動的に挿入された場合、リンクがフォーカスを失うまで最初の子要素にスタイルが適用されません。

対処法

基本的にないと思いますが、クリック後フォーカスが自動的に外れるようにすれば良いかもしれません。

まとめ

こうして見ると、基本的には使えるけれども、特定のプロパティと併用すると問題が起こる、というものが多いですね。
新しい機能に対応した最初のバージョンでは、実装が不十分であることが往々にしてあるので、気を付けたいところです。