アイコン、画像の表示位置がずれる

概要

アイコンや画像の表示位置がずれて表示されてしまいます。他のブラウザーと比較した場合、上下左右にずれて表示されたり、横並びに表示されるべきアイコンや画像が縦並びに表示されたりします。

要因

複数の要因が考えられますが、代表例として以下があります。

アイコンや画像が横幅に収まらず、折り返されている span 要素等のブロックが横幅に収まらずに折り返されて表示されている場合があります。ブラウザーの違いによりインラインブロック間にできる間隔が異なる事がありますので、他のブラウザーで横並びに表示できていても Firefox で表示すると折り返され、縦並びに表示されてしまいます。
css
```
.btn-pulldown-main {
  box-sizing: border-box;
  width: 49.2%;
  display: inline-block;
  padding: 9px 0;
}
```
zoom プロパティが使用されている zoom プロパティが使用されている場合、Firefox では適応されません。他のブラウザーでは、適応されているプロパティが Firefox では適応されていない場合、見栄えに差異が出てしまいます。よって、他のブラウザーで調整した表示位置が、Firefox では誤った表示となってしまいます。
css
```
.menu {
  display: block;
  position: absolute;
  top: 0px;
  right: 0px;
  zoom: 0.5;
}
```
ブラウザーの解像度の違いによる表示差異 ブラウザーの解像度の違いによって、px 指定されているマージンが表示上、異なってしまう場合があります。結果、アイコンや画像の表示位置がブラウザー間でずれて表示されてしまいます。
css
```
img.message {
  position: relative;
  margin-top: -52px;
}
```

解決策

各要因の解決策の代表例として以下があります。

アイコンや画像が横幅に収まらず、折り返されている 各ブロックの横幅を調整することで解消されます。ブラウザーによってインラインブロック間のマージンが異なる場合があるため、実際に表示させながら、横幅に各ブロックが収まる(折り返されない)様に調整していきます。
css
```
.btn-pulldown-main {
  box-sizing: border-box;
  width: 49.0%;
  display: inline-block;
  padding: 9px 0;
}
```
zoom プロパティが使用されている zoom プロパティは Firefox では適応されないため、heightプロパティで位置を指定するのがよいです。その他の指定も px 指定で調整することで、他のブラウザーとの表示差異はなくなります。
css
```
インライン { height: 80px;}

.menu {
  display: block;
  position: absolute;
  top: -15px;
  right: -10px;
}
```
ブラウザーの解像度の違いによる表示差異 アイコンの位置をpaddingプロパティで再調整することで正しく表示させることが可能となります。
css
```
img.message {
  position: relative;
  margin-top: -52px;
  padding: 0 0 6px 0;
}
```

メリット

他のブラウザーでも互換性を維持することができます。

戻る