FFでposition:relativeにするとbackground-color設定してあるtdのborderが消える

表題のとおりですが、

Firefoxでtableのtdにbackground-colorとposition:relativeとborderを同時に設定すると
borderが消えます。

百聞は一見にしかず。
これをFFで見てみてください。

http://codepen.io/anon/pen/PbbyvN/

はい、borderが消えてます。

tdにposition:relativeなんて設定してるからじゃん、と思いますね。
私もそう思います。

ただ、tdにキレイに下付きにボタンを配置したい＆tdの中の高さが変わる場合は、
tdにボタン分のpadding-bottomをつけてやって、absoluteで配置したいということがあると思います。

何の話をしてるのか分からない人は、
どういう状況のことかcodepenでどうぞ。

http://codepen.io/anon/pen/RooqbP

これでborderが消えてるよ！とのご指摘がありました。

困ったなーと思っていろいろやった結果、解決策が見つかりました！

borderの消えているtdに以下のスタイルを追加してみてください。
background-clip: padding-box;

直ったー♪


http://www.htmq.com/css3/background-clip.shtml

引用：
background-clipプロパティは、背景の適用範囲を指定する際に使用します。
padding-box
背景をパティングボックスに適用する

paddingから背景を適用することにより、borderが消えるのを回避できました。

皆さんも、こんな現象に出会ったら、使ってみてください。
ブラウザサポートもIE9から対応しています。
http://caniuse.com/#search=background-clip

では！さらばだ！