以前エントリーした記事、画像置換 height: 0; バージョンで少々不具合があったので修正版をエントリーしておきます。

何が不具合だったかと言うと、a要素にheight: 0、overflow: hiddenを指定していても一部のブラウザでテキストが見えてしまう時がありました。この問題はa要素に指定していたoverflowプロパティを親要素であるliに指定し、置き換える画像の高さを指定することにより回避出来ます。

XHTML

<ul id="globalNav>
<li id="nav1"><a href="#">Nav1</a></li>
<li id="nav2"><a href="#">Nav2</a></li>
<li id="nav3"><a href="#">Nav3</a></li>
<li id="nav4"><a href="#">Nav4</a></li>
</ul>

CSS

ul#globalNav li {
	display: inline;
	float: left;
	height: 35px; /* 置き換える画像の高さ */
	overflow: hidden;
}
li#nav1 a {
	display: block;
	width: 50px; /* 置き換える画像の幅 */
	height: 0;
	padding-top: 35px; /* 置き換える画像の高さ */
	background: url(../img/bg_xxx.gif) no-repeat 0 0; /* 置き換える画像 */
}