Web 制作のことを中心に、ちょっとした Tips などを掲載しています。「自分用メモ」が基本スタンス。

btmup Blog

CSS Firefox

Firefox でテーブルの線(border)が表示されたりされなかったりする件の対策。

投稿日:

珍しく Firefox のバグです(だと思います)。
あえて「解決法」ではなく「対策」としたのは、解決したかどうか定かではないからです。
つまり、「よく分からんけど、とりあえずうまくいってるっぽい」と。

発生した現象はタイトルの通りですが、テーブルに設定した線が、Firefox で見てみると表示されたりされなかったりするのです。
「されたりされなかったり」とは言っても、表示のたびに結果が変わるということではなく、再現性はあります。
ただ、文字サイズを変えたり行間を変えたりパディングを変えたりすると、表示される線と表示されない線が違ったりするということです。
色々な数値を微調整していけばすべての線がちゃんと表示されるポイントがあるかも知れませんが、環境が異なればまた結果も変わってくるでしょうし、根本的な解決にはなりません。

というワケで、色々試した結果、以下のような方法に落ち着きました。
かなり無理矢理ではありますが、今のところ正常に(?)表示されています。

原因は「border-collapse: collapse;」?

ネットで調べまくってもいまいち情報が無かったので、Firebug を使って一つ一つプロパティをいじりながら確認してみました。
すると、どうやら「border-collapse: collapse;」が原因らしいことが判明。
テーブルごとに設定するのが面倒なので、「border-spacing: 0;」と一緒に「border-collapse: collapse;」を table タグセレクタで一括設定してるんですが、これを Firebug で外すと線が表示されたのです。
(もちろん線の重なりが解除になるので太くなっちゃいましたが)

じゃあ、この現象が起こってるテーブルだけ「border-collapse: separate;」にすれば良いのかも。
という仮説を検証するため、「border」の設定方法を若干メンドくさい方法に変更。
つまり、元々は「border」で四辺をいっぺんに設定していたものを、table 全体とセルごとの設定に一辺ずつ振り分けたワケです。

うん、分かりにくいですね。
以下、まとめ。

【元々】

table {
	border-collapse: collapse;
	border-spacing: 0;
}
th,td {
	border: 1px solid #000;
}

【修正後】

table {
	border-collapse: collapse;
	border-spacing: 0;
}
table.hoge {	/* 線が表示されなかったテーブル */
	border-collapse: separate;
	border-top: 1px solid #000;
	border-left: 1px solid #000;
}
th,td {
	border-bottom: 1px solid #000;
	border-right: 1px solid #000;
}

結果、見事成功。
これで、Firefox でも全ての線が表示されるようになりました。

やっぱり IE 対策は必要

ところが、それで完全解決とはいきません。
毎度毎度の登場、IE6 が顔を出します。今回は IE7 もご一緒でした。

上記の設定をしたところ、何とセル同士の間に隙間ができたのです。
IE8は無事。ということは、IE6 と IE7 のバグ……? またかよ……。

とはいえ、今回の元々の原因は Firefox にありますので、Firefox にだけ上記の設定を適用することにしました。

それが以下。

【最終版】 ※設定の仕方が間違ってたので修正しました。[2010-05-19]

table {
	border-collapse: collapse;
	border-spacing: 0;
}
table.hoge {	/* 線が表示されなかったテーブル */
	border-top: 1px solid #000;
	border-left: 1px solid #000;
}
html:not([lang*=""]) table.hoge {	/* Firefox用ハック */
	border-collapse: separate;
}
th,td {
	border-bottom: 1px solid #000;
	border-right: 1px solid #000;
}

Firefox にだけ適用するハックって何種類もあるみたいなんですが、何となく安定してるっぽいので今回はこの方法にしてます。
(参考:逆引きCSSハック(IE8,Firefox,Opera,Safariを含めたブラウザ別CSSハック) | Liquid Paper Clips

とりあえずこれで終了。
根本的な原因が不明なのがアレですし、ハックで決着っていうのもアレですが、まぁ一つの参考にしてみてください。
他のスタイルとの競合とかもあったりするかも知れませんしね。

しかし、バグは IE だけにしてほしいもんですなー。




-CSS, Firefox
-, , , , , ,

Copyright© btmup Blog , 2024 All Rights Reserved Powered by AFFINGER5.