FireFox 3 のfloat指定に注意

CSSでレイアウトするときに、ブロック要素をfloat:leftで横に並べる、というのはよく使われる手法ですよね。
しかしFireFox3がリリースされてから、チラホラと「レイアウトが崩れている」の声が聞こえてくるように。

調べてみると、フロート配置時に、FireFox3とFireFox2ではちょっとしたクセのような違いがあることが分かりました。

例

ヘッダー部分のユーティリティで、「トップページ」へのリンクと「サイトマップ」へのリンクを並べようとしています。FireFox3以外ではちゃんと表示されるんですが、3だとサイトマップがどっか行ってしまいました。
ボーダーで見えるようにしてみると、下に落ちていたことが分かりました。（*テスト用に可視化する際は、背景色のほうがいいです。ボーダーを使うとサイズが1px変わってしまうので）

文字を消すために、親要素にネガティブインデント「text-indent:-9999px;」を使っていたんですが、これが影響していた模様。
親要素のulではなく、それぞれのa要素に割り当てたところ、うまくいきました。

UL　　　text-indent-9999px
　　LI
　　LI
/UL

ではなく、

UL
　　LI　　text-indent-9999px
　　LI　　text-indent-9999px
/UL

このようにすればいい、ということです。

具体例・使用したCSS

ul#utility {
	list-style-type: none;
	text-indent: -9999px;　/* ←これが悪さをしてる*/
}
#utility li {
	float: left;
}
 
#utility .top a{
	display: block;
	height: 16px;
	width: 53px;
	margin-right: 5px;
	outline : 0;
}
#utility .sitemap a{
	display: block;
	height: 16px;
	width: 80px;
	outline : 0;
}