![[CSS] Firefoxでborderが表示されない場合の対処](https://metrograph.jp/wp-data/wp-content/uploads/2016/03/firefox-border.png)
[CSS] Firefoxでborderが表示されない場合の対処
webFirefoxで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
のふたつはよく問題を起こすんだけど、なぜか同時に指定してやると大人しくなる率が高い気がします。
手のかかる狐だよまったくもう。