今日サイトの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コードを改行しないようにすると直るかも知れません。
