display: table-cellした要素の中で疑似要素を使った画像置換をcontent: ""(空文字指定)でやると、Internet Explorer 9以外の現行ブラウザーでは謎の空白が出来てしまう現象に遭遇した。説明難しい。IE9以外で同じ挙動なので多分仕様に従ったものなんじゃないかなーとは想像できるんだけど、どうしてこうなるのかよくわからないのでメモがてら書いておく。直す方法だけは一応発見した。
Demo: display: table-cell and content: "" for image replacement
デモではdisplay: table-cellとしたdiv要素の中で、疑似要素を使ってテキストを追い出す形の画像置換を行なっている。contentプロパティーで空文字を指定している場合画像置換で表示した画像の下に空白が(一行分？)できている。.irというクラス名を付けた画像置換する要素は意図したサイズになっていて、特におかしくはなさそう。
色々試した結果、直す方法はtable-cellをやめるかcontent: "\00a0"にするかのどちらか。\00a0は非改行スペース。普通のスペース(\0020)とかではダメだったけど、他にも垂直タブ(\000b)とかでもいけるみたい。table-cellでブロックを横に並べてかつセンタリングみたいなことをやってるところ(具体的にはページング・ナビゲーション)で起きた現象だったので、ここでは\00a0で逃げた。
本当はcontentプロパティーで直接画像を指定しちゃえばいいんだけど、SVG画像だとうまくリサイズされないケースがあって頭が混乱してきたのでこういう形で逃げてる……。SVGのviewboxとwidth、height属性の指定の仕方によって微妙にブラウザー間で表示に違いが出たり、CSS経由だとまた別の違いが出たり、CSSで使うケースでの情報がそもそも少なすぎたり、CSSでSVGは魔窟感ある。