FireFoxで隙間ができてしまう

ブラウザ

今日サイトのCSSやテンプレートをいじっていたら、突然FireFoxにだけ、ナゾの青い横線が出たり、divタグとdivタグの間に1ピクセルほどのナゾの隙間が生じる現象が。

ナゾの青い線の正体

うちのナビゲーションバー(上のタブになっているやつね)は、ulタグをtext-indentプロパティで横並びに変えております(XHTMLというやつだ)。ここにナゾの青い横線が発生。どうやらテキストの下線に付くべきものが表示されるらしい。

これを消すには、スタイルシートで「text-decoration:none;」してやればいいみたい。うちのナビゲーションバーはCSSのロールオーバーが付いているから、サッパリわからなかった。でも、青と言ったらリンクの色。勘の良い人なら、リンク絡みだとすぐにわかったんだろうなぁ

divタグとdivタグの間の、ナゾの隙間の正体

こんな感じでdivタグをdivタグでくくるケースは多い。ここで、area1とarea2の間に、1ピクセルほどの隙間が生じるんである。普通は気がつかないが、background-imageで画像を使っていると、隙間を見つけちゃうんである。

<div id="content">

　<div id="area1">

　　　　　.

　　　　　.

　　　　　.

　</div>

　<div id="area2">

　　　　　.

　　　　　.

　　　　　.

　</div>

</div>

しかも、まったく同じCSSを使っているのに、隙間ができる場所にはできて、できない場所にはちっともできないんである。なんですとこれは。

mdのケースでは、area1とarea2の間に隙間が生じてレイアウトがずれたんですが、ずれるところは決まって「idの最後の部分にaタグがある」のが特徴。トライ＆エラーの結果、原因はCSS側ではなく、HTML側にありました。

mdは律儀にHTMLをタブで字下げしてコーディングしていたんですが、aタグで囲まれる部分を改行をせずにびっちり詰めたら、アッサリ直りやがんのさー。わかるかーこんなのー(TT)

そういえば、Win版IEでのliタグやネスケのテーブルのtdで、変に隙間ができるなどの現象が起きることがあるのと似ています。変だと思ったら、liやtdタグ部分は、HTMLコードを改行しないようにすると直るかも知れません。