<li>要素をinline化すると隙間ができる問題の回避策

ナビゲーションを全て画像にして、それぞれliでマークアップし、inline化して横並びにさせる手法がありますが、この手法はなぜか2pxほど隙間ができてしまう問題があります。

なぜかというと、下記のように１項目ずつソースコードを改行してしまうことにあります。

HTML

1. <ul id="navi">
2. <li><a href="hoge1.html"><img src="navi1.gif" alt="ナビ1" /></a></li>
3. <li><a href="hoge2.html"><img src="navi1.gif" alt="ナビ2" /></a></li>
4. <li><a href="hoge3.html"><img src="navi1.gif" alt="ナビ3" /></a></li>
5. </ul>

通常、このようにソースを書いても隙間が入ることはないのですが、なぜかソースコード上の改行＝隙間とブラウザでは認識されてしまいます。

一般的な回避策としては、下記のように全て改行せず繋げて書くものが知られています。

HTML

1. <ul id="navi"> <li><a href="hoge1.html"><img src="navi1.gif" alt="ナビ1" /></a></li><li><a href="hoge2.html"><img src="navi1.gif" alt="ナビ2" /></a></li><li><a href="hoge3.html"><img src="navi1.gif" alt="ナビ3" /></a></li> </ul>

この場合大変見づらく、編集が大変になります。6つも7つも…となった場合は見たくもないですね。

もう一つ、よく知られているのが、</li>の閉じタグを途中で区切ってしまう手法があります。

HTML

1. <ul id="navi"> <li><a href="hoge1.html"><img src="navi1.gif" alt="ナビ1" /></a></li ><li><a href="hoge2.html"><img src="navi1.gif" alt="ナビ2" /></a></li ><li><a href="hoge3.html"><img src="navi1.gif" alt="ナビ3" /></a></li> </ul>

これでうまくいくはいくのですが、タグを途中で切っている事にはちょっとした不安感が残ります。

というわけで、ナイスな手法をお仕事でちょっとお世話になった大谷さんに教えて頂いたのでご紹介。

コメントタグを2行に渡って差し込みます。
これにより、</li>から<li>がくっついたことになります。
なんとクレバーな手法だ！とちょっとした感動を覚えました。

HTML

1. <ul id="navi"> <li><a href="hoge1.html"><img src="navi1.gif" alt="ナビ1" /></a></li><!--
--><li><a href="hoge2.html"><img src="navi1.gif" alt="ナビ2" /></a></li><!--
--><li><a href="hoge3.html"><img src="navi1.gif" alt="ナビ3" /></a></li> </ul>

見やすい！簡単！確実にエラーが出ない！
これ以上にナイスな回避方法ってあるのでしょうか。
（そもそもナビゲーションを画像で横並びにするな、というのはナシの方向で）
もっと良い手法があれば是非ご教示ください。