Firefox で table の position:relative; を指定すると border が消える仕様というバグ

昨日の jQueryValidationEngine の table タグの問題。
position: relative; で回避できました。

た・だ・し！

Firefox では position: relative; と border と
background-color が共存できずに
線が消える仕様というバグがあるので注意してください。
おすすめはレイアウトに table タグを使わない…
ということで dl / dt / dd を使うのがいいかと？
もともとレイアウト目的で table を使うのはどうか？
と思うので jQueryValidationEngine.js を使うなら
違う方法がいいかもしれません。

さて前向きな対応方法としては
after 疑似要素を使うという方法があります。

th::after,
td::after {
	position: absolute;
	z-index: 2;
	top: -1px;
	left: -1px;
	display: block;
	content: '';
	width: 100%;
	height: 100%;
	border: 1px solid #cccccc;
}

th や td に position: relative; を指定している場合、
この方法が利用できます。
top 、left で動かしてるのは th や td に
border を 1px 指定している場合、
上の例のように 1px 戻してください。