Firefoxでだけ画像が出ない【HTML/CSS】

TIPS

こんにちは。ざわかける!のざわ(@zw_kakeru)です。
html/cssを書いてる時に、Chrome、Edgeでは画像が出るのになぜかFirefoxは出ないという現象に遭遇したのでその対処をしました。

起こったこと

htmlとcssを使って表を作成していた時のことです。
作成中にふと思い立って、上の行から数字が増えたのか減ったのかが分かりやすくなるように矢印をつけてみました。

400 <img class='arrow' src='path/to/file/arrow.png'>`;

リリースしてからweb上で確認するとChrome、Edgeでは正しく動作していました。
しかしながら、なぜかFirefoxでは矢印が表示されなかったのです。

特定のブラウザでだけ画像が表示できないとかそんなことある。。。?
原因不明です。困りました。

対処

矢印のcssに修正を加えました。
具体的にはheightの単位にemを指定していたのをremに変更しました。
変更前の矢印がこちらです。(分かりやすくするために諸々の関係ない記述を省略しています。)

img.arrow {
    height: 1em;
}

変更後がこちらです。

img.arrow {
    height: 1rem;
}

おそらく、Firefox から見た時に画像か画像の先祖で font-size: 0; が指定されていたのだと思われます。
よって1em だと 0 * 1em = 0 で画像が 0px になって見えなくなっていたのでしょう。
emではなく rem を使うことによって Firefox でもルートの font-size: 14px; が基準になるので、画像も 14px になりますね。

この修正を加えてみると、無事Firefoxでも矢印が表示されました。
もちろんChrome、Edgeでも問題なく表示されています。

めでたしめでたし。
(じゃあなんでFirefoxでだけ先祖でfont-size: 0; が指定されていたのでしょうかね…詳しい方がいましたら教えてください。)

おわりに

今回の場合はemでもremでもどっちでもいいと思ってemを使っていたので、原因の発見が遅れてしましました。
私はweb屋さんではないので、たまにhtml/cssを触ったときはこういう突発的なトラブルに出会うことがよくあります。
そういう時も焦らずに原因を特定して対処するのが基本になりますね。
にしても今回は分からなかったなあ…解決に30分くらい時間を使ってしまいました。
精進します。

タイトルとURLをコピーしました