table(th,td)や、li、divなどにborderを設定したのにFireFoxで表示されない!を解決する方法です。
原因としては、borderを指定した要素に、position: relative;とbackground-colorを指定していると、borderが背景色で隠れてしまって表示されないようです。
解決方法
borderを指定している要素に対して、
background-clip: padding-box;
を追加するときれいに表示されます!
background-clipプロパティは、背景の適用範囲を指定するもので、初期値はborder-box(背景をボーダーボックスに適用)となっています。
padding-boxを指定することで、背景をパティングボックス(borderの内側)に適用させ、borderが隠れるのを防ぐことができます。
さいごに
今回は、FireFoxでborderが表示されない場合の解決方法をご紹介させていただきました。
「参考になったよ!」という方はSNSなどでシェアしていただけると嬉しいです。