先日、仕事でWebサイトのテーブルタグ部分の編集作業をしていると、ChromeやEdgeでは問題なく表示されるのに、firefoxでだけ表の一部の線が消えてしまうという問題に出遭いました。
今回は、その問題の原因と解決方法についてまとめてみました。
どんなときに消えるのか
もちろんのことですが、tableタグを使うたびにfirefoxでの表示がおかしくなるというわけではありません。
しかし限られた状況下において、firefoxでだけborderが消えてしまうようです。他のブラウザでは問題ないのに。
では、どのような状況でそういった問題が起こるのか?
以下の条件が揃うと問題が起こるようです。
- borderが指定された要素に対して、background-colorが指定されている
- その要素に対して、「position: relative;」が効いている
実際に、それら条件が揃った状況を以下のページで実現してみました。
Firefox（バージョン115.0.1）で確認すると、やはり一部のborderの表示が消えているようです。
どうしてfirefoxでだけなのか
ChromeやEdgeでは問題ないのにFirefoxでだけ表示に問題が起こる。それはなぜなのか？
理由は、「Firefoxはテーブルのデフォルトのスタイルが異なるから。」というところに行き着きます。
▼各ブラウザごとのデフォルトのスタイルシート
https://coliss.com/articles/build-websites/operation/css/user-agent-stylesheets.html （見てみたけどよく分からん）
ブラウザによって、デフォルトでどのようなスタイルシートが適用されているのかが異なるようで、今回のborder問題に関してもデフォルトのスタイルの違いが影響しているようです。
消えた線を表示させるには
Firefoxでも線が消えないようにするためにはどうすればよいのか？次のCSSを1行追加で解決します。
background-clip: padding-box;Firefoxで以下のページを開き、検証モードで table,th,tdタグあたりに上記のCSSを追記すると、消えていた線が見えることが確認できます。
background-clipという背景領域が決められるプロパティの値をpadding-boxにすることで、背景色がボーダーの内側までしか伸びなくなります。
▼参考記事
例外もあり
ただし、background-clipの値をpadding-boxにしても問題が解消されないという例外もあります。
それは、テーブルの中でrowspanやcolspanが使われていて、それらの数値を誤っていた場合です。
「rowspan」と「colspan」はセル結合をさせるときに使うもので、結合するセルの数を値にしなければならないものです。
以下ページの場合、「2,800円」のところで rowspan が使われています。
実は、rowspanやcolspanの値を誤ったものにすると、ChromeやEdgeでは自動補正されて正常に表示されます。
しかし、Firefoxでは補正が行われず、一部の線が消えてしまうということが起こります。
つまり、この場合は先ほどのように「background-clip: padding-box;」を追記したとしても問題は解消されないのです。
「この問題に対しては、○○が有効」といった一問一答の感じでは上手くいかないことが多いのがWeb制作だなぁと思わされた
以上が、「firefoxでだけ表の一部の線が消えてしまうという問題」の原因と解決方法についてでした。
Web制作に携わっていると色々な落とし穴に出遭いますが、今回のようなブラウザごとの違いによる落とし穴パターンは初めてで新しい感覚を味わいました。
今後もこんな感じで備忘録を残していけたらなぁと思います。
