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;
}

About: dacelo


Leave a Reply

Your email address will not be published. Required fields are marked *