system
中山 享祐

2022.4.18HTML/CSS 

Webクリエイター

中山 享祐

2021年8月1日「マリンロード」は「インソースマーケティングデザイン」へ社名を変更いたしました

FireFoxで表示が崩れる場合の対処方法

こんにちは!

今回は、FireFoxでサイトを閲覧した際に表示が崩れてしまう現象とその解決方法について紹介していきたいと思います。

表示崩れが起きた箇所

今回の表示崩れは、お問い合わせフォームにある「選択ボックス」で起こりました。
選択ボックス (firefox)

※「選択ボックス」は、クリックするとプルダウンメニューが表示され、その中から項目を選択するものです。

CSS

選択ボックスのCSSは以下のように記述しました。

調整前のCSS

 

表示検証

この状態で表示検証を行うと、ChromeとEdgeで閲覧した場合は表示に問題はありません。

Google Chrome

選択ボックス (Chromeで表示)

Microsoft Edge

選択ボックス (Edge)

 

しかし、FireFoxで表示確認をすると、以下のように選択ボックス内の文字列が、ChromeとEdgeで見た時よりも少し上寄りに表示されてしまいます。

選択ボックス (firefox)

 

解決方法

解決方法はいくつかありますが、ここでは自分が実際に試した方法を紹介したいと思います。

CSSに追記した内容

先ほどのCSSに、以下の記述を追加します。

CSSに追加した記述

追記した「@-moz-document」はFireFoxのみにCSSを適用するプロパティです。

 

表示確認

追記後、再びFireFoxで表示検証を行うと、選択ボックスで起きていた文字列の表示崩れが解消しました。

選択ボックス (firefox、修正後)

 

修正前後で比較

修正前後のFireFoxでの表示状態

 

検証ツールで確認

ブラウザの検証ツールで選択ボックスの部分のCSSを確認すると以下のようになり、FireFoxのみ、先ほど追記した内容が適用されていることがわかります。

各ブラウザの検証ツールでCSSを見た時の比較

 

複数ブラウザで検証を!

普段使用しているブラウザでは表示に問題がなくても、別のブラウザから閲覧すると表示が崩れていることがあることがあるので、WEBページのコーディングを行った後、複数のブラウザで表示を検証することは、今回のような現象を発見・修正する上で必要なことであると改めて感じました。

WEBサイト診断 現役ウェブ解析士が教えるWebサイトの読み解き方 イメージ
ホームページ制作サービスはこちら
ページTOPへ