--- title: ナビゲーションメニューが他のアイコンと重なって表示されたり、画面からはみ出たりしてしまう slug: orphaned/Web/Compatibility_FAQ/Overwrapped_Navigation.html tags: - Compatibility - Layout original_slug: Web/Compatibility_FAQ/Overwrapped_Navigation.html ---

概要

　他のブラウザで正しく表示されているナビゲーションメニューが、Firefoxで表示すると大幅に崩れてしまう場合があります。
　一列に並ぶべきアイコンが画面横幅に収まっておらず、他のアイコンと重なって表示されてしまい、周辺のアイコンが全体的に配置崩れを起こしてしまいます。

　

要因

　要因の代表例としては以下があります。

テーブルの列幅が指定されていない
display: table; でテーブルの列幅を指定している場合、Firefoxでは認識できていません。
列幅を指定していないことで、アイコンが画面の横幅に収まらず、配置崩れを起こしてしまいます。
```
　　navigation ul {
	display: table;
	width: 99.9%;
　　}			
```
また、display: -moz-box; が指定されている場合も、mobile版Firefoxでは認識できませんので、同様の現象が発生します。
```
　　.go_contents_btn {
	display: -webkit-box !important;
	display: -moz-box !important;
	-webkit-box-pack: center !important;
	-moz-box-pack: center !important;
	width: 100%;
　　}			
```

解決策

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

テーブルの列幅が指定されていない
Firefoxでは、display: table; の指定(mobile版Firefoxでは「-moz-box」も含む)は動作しないため、テーブルの列幅の指定にdisplay: inline-block; やdisplay: flex; を追記します。

display: inline-block; の場合
```
　　navigation ul{
	display: table;
	display: inline-block;
	width: 99.9%;
　　}			
```
また、親要素をflex設定にした場合、自動的に子要素はflexアイテムになります。flexアイテム用に横方向寄せを設定しているプロパティをjustify-contentプロパティに変更します。
縦方向寄せを設定しているプロパティもalign-itemsプロパティに変更します。

display: flex; の場合
```
　　.go_contents_btn {
	display: -webkit-box !important;
	display: -moz-box !important;
	display: flex !important;
	-webkit-box-pack: center !important;
	justify-content: center !important;
	width: 100%;
　　}			
```

メリット

　・少ない修正で他ブラウザとの互換性が取れます。

戻る