IE8で:after疑似要素が適用されなかった時の対応

XPのサポートが間もなく切れるという時期に来ていますが、IE8の対応はまだまだです(Win7のデフォルトがIE8なので、IE8はしばらく対応はしていくことになると思われるけど)。そんな中IE8で:after疑似要素を使って表示されないという現象に遭遇したので、その時に対応したやり方のメモです。

:after疑似要素で装飾画像となる要素を生成するというもので、書いていたコードは下記のようなごくありがちな感じです。(コードはscss記法です。)

.class-name {
	position: relative;
	&:after {
		background: url(img.png) no-repeat 0 0;
		content: '';
		position: absolute;
		top: 0;
		left: 0;
	}
}

Chorme、Firefox、IE10、Safari、Mobile Safariは問題なく表示されているが、 なぜかIE8だけ表示されない。

:after疑似要素、:hover疑似クラスやz-indexのバグに関連するのかと思っていたけど、下記のようにcontentプロパティの値を空文字から空白文字に変更することで表示されるようになりました。

.class-name {
	position: relative;
	&:after {
		background: url(img.png) no-repeat 0 0;
		content: ' '; //空文字から空白文字に変更
		position: absolute;
		top: 0;
		left: 0;
	}
}

今回のケースは、上記のスタイルをdiv要素内で使っていたり、table要素内で使っていたりしていました。div要素内だと問題ないようですが、table要素内だとcontentプロパティの値が空文字だと表示されませんでした。

今のところ、空白文字に変更したところでも他のブラウザにも影響はないようなのでこれでいくことにしました。ほんとIE8以下は面倒ですね。