imgを縦に並べたときにIEで余白ができる

仕事でタイトルのような現象がおきててこずってしまったので備忘録として記述。

今回は、テーブルレイアウトで他者が作ったものを修正していたときに起きた現象です。
tableのひとつのセルに画像が縦に3つ並んでいて、どうしても2つ目の画像の上か下に余白ができてしまうというもの。

cssでimgにvertical-align: top;とすると下に余白、vertical-align: bottom;にすると上に余白ができてしまう。
tdに属性でvalignを追加しても解決しない。

画像は上下の2つが縦に大きめで、真ん中のひとつが縦が狭い。
最終的にはここに落ちがありました。

imgもfontの高さを持ってしまい、真ん中の画像、実際には縦が9pxでしたがフォントの高さ分14pxとってしまっていました。

なのでcssでfont-size:0;とline-height: 0;を書いて解決。

tableに限らずリストで並べたりしても起こりそうだ
以前にも同じようなことがあったような気がするけどもすっかり忘れてしまってはまってしまった。

次は忘れないようにここに。。。