リンク付き画像をリストに入れたときにできる変なマージンの回避法

画像をリストタグとaタグでマークアップしたものをブラウズすると、変な余白が開く現象があります。
長年（過去2回ですが）苦しんできたこの現象の原因と回避法が分かりました。のでメモ。

HTMLバージョン

XHTMLTransitional、XML宣言あり。

タグの状況

liタグの中にaタグを入れその中にimgタグを入れている。

CSSの状況

ul、li、img共にマージンはゼロ。list-styleはnoneに。

表示：
marginを0にしているにもかかわらず、Firefox、Safari、IEで変なマージンがでる。

---

１．プレーンな状態。

CSSに何も指定していない状態。
ちなみにOperaはこの状態でもマージンがないです。

２．CSSで、ul、li、a、imgタグのmarginを0に。

margin: 0;の指定があるにもかかわらず、変な余白が。

３．imgにdisplay: block;を指定。

モダンブラウザでimg関連の余白の解決法としてよく挙げられるのは、
imgに対してdisplay: block;を指定して画像をブロック要素にする方法。

確かに、Firefox、Safariでは余白がなくなりましたが、
IEでは逆に余白が余計広がってしまいます。

４．liに画像の高さと同じheightを指定。

どうもIEでは、liタグの中にブロック要素があると余白ができるようです。
ので、imgに対するdisplay: block;を消し、
liに画像と同じ高さのheightを指定してみる。

Firefox、Safari、IE7、8で余白を消すことに成功しました。
が、最終関門IE5、6がしぶとく余白をあけています。
シェアが低くなっているとはいえ、まだ彼らを無視することはできない…。

というより、無視したくないので。

５．liにheightを指定したまま、overflow: hidden;を指定する。

これで完成！

ということで、ようやく完成しました。
ルールとしては、

liタグの中に入れるものはブロック要素にしないこと。
liタグには画像と同様の高さを指定し、overflow: hidden;すること。

以上を守ると、ほとんどのブラウザできちんと表示できます。

この問題を解くのに本日2時間費やしました。

以上、メモ終わり。