【CSS】FireFox対策!線(border)が表示されない・消える場合の解決方法

【CSS】FireFox対策!線(border)が表示されない・消える場合の解決方法

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などでシェアしていただけると嬉しいです。

WEB DESIGNカテゴリの最新記事