リンクをクリックしたときに横に伸びる点線を消す方法2

えー、ずいぶん長いこと放置です。

IDEA*IDEAさんで紹介されている、「リンクをクリックしたときに横に伸びる点線を消す方法（Firefox）」に対するフォローです。

リンクが張ってあるテキストのtext-indentを-9999pxにするという方法をとるとFirefox等で点線がでます。
それを消すために
overflow:hidden;
outline:none;
を設定しますが、例えば liタグの中のテキストにリンクを張る場合などは下記のようにHTMLをコーディングする必要があります。

===HTML===
<ul id="sample">
	<li><a href="#"><span>あいうえお</span></li>
	<li><a href="#"><span>かきくけこ</span></li>
</ul>
===CSS===
#sample li {
	background: url(sample.jpg);
	height:20px;
}
#sample li span{
	text-indent:-9999px;
	overflow:hidden;
	outline:none;
}

や、まあ良いんですけど、

<span>

がキモチワルイ！

で、どうしたらこの気持ち悪さをなくせるかというと、下記で実現できます。

===HTML===
<ul id="sample">
	<li><a href="#">あいうえお</li>
	<li><a href="#">かきくけこ</li>
</ul>
===CSS===
#sample li {
	background: url(sample.jpg);
	height:20px;
}
#sample li a{
	display: block;
	height:0pt;
	overflow:hidden;
	padding-top:20px;
}

ね？すっきりです。Appleのメニューバーでも使われていた方法です。
若干CSSが面倒なので、リンク無しのテキスト飛ばしは、私もtext-indent:-9999pxを使います。

いかがでしょうか？