Firefoxでtd要素のborderが表示されない

td要素にborderを指定しても、borderが表示されないことがあります。

td {
    position: relative;
    border: 1px solid #000;
    background: #ccc;
}

こんなようなスタイルを当てたとき、Chromeなどではきちんと表示されるのだけど、Firefoxだけ表示されないのです。

原因はposition？

デベロッパーツールでtd要素をいじってみたら、どうもpositionが指定されているとborderが表示されなくなるらしい。
かと言ってpositionを外すと意図したデザインが出来ないし、どうしたものか……と悩んでいたら、あっさり解決しました。

CSSのみで対処できた

td {
    z-index: -1;
    position: relative;
    border: 1px solid #000;
    background: #ccc;
}

td要素にz-index: -1;を指定してあげると、きちんとborderが表示されるようになりました。
恐らく、positionを指定すると、borderがbackgroundの後ろに行っちゃっているのではないかと思います。
positionとz-indexのふたつはよく問題を起こすんだけど、なぜか同時に指定してやると大人しくなる率が高い気がします。
手のかかる狐だよまったくもう。