備忘録：FirefoxCSSバグ(?)対策編

css tips 



<ul>

	<li>list1

		<ul>

			<li>list1-1</li>

			<li>list1-2</li>

		</ul>

	</li>

	<li>list2

		<ul>

			<li>list2-1</li>

			<li>list2-2</li>

		</ul>

	</li>

</ul>
サイトマップなどを作る際に上記のような入れ子リストはよく使われますが、ナゼかFirefoxだけ下側に10px膨らむという現象が起きました。
Firebugでチマチマ確認したら、サイトマップ内の要素は全て余白ゼロにしているのに<ul>内の<ul>が膨らんでいるようでした。

10pxとまとまった数なだけに、どこからか押し出されてるのかとは思ったのですが、上下マージンを一通り削っても変化ナシ。
自分はよく怪しいタグに対して「border:solid 1 #f00」と、枠線を入れて犯人探しをするんですが、この<ul>に対して枠線を入れたら何故かちぢんだので、試しに「overflow:hidden」を入れてみたら…他ブラウザと同じ、正常な表示になりました。
具体的にはこんな感じに


#sitemap ul ul {

	〜（他スタイル）

	overflow:hidden; /*FirefoxCSSバグ対策*/

}



最近妙に起動が重かったり、Firefoxマンセーって感じも薄まってきました。もう「IEとは違うのだよ！」って感覚が無くなって、当たり前に使ってるせいかなぁ。