Lightning pro でグローバルメニューがIEのみ表示がおかしい

タグ: #Lightning pro #IE　#グローバルメニュー　#背景　#バグ　#表示　#ずれる

このトピックには8件の返信、2人の参加者があり、最後にsuzu3により4年、 11ヶ月前に更新されました。

9件の投稿を表示中 - 1 - 9件目 (全9件中)

投稿者

投稿
2019年12月18日 12:31 PM #28151
suzu3
参加者
Lightningproの　FortII (Bootstrap4/footer light) をつかっているんですが
グローバルメニューがIEのみ表示がおかしいので直したいです。
1.グローバルメニューの背景左右画面いっぱいに伸びず少しで切れてしまっている。
2.スクーロールするとグローバルメニュー位置がずれ、1と同じように背景左右画面いっぱいに伸びない。

プラグインはひとつひとつオンオフしてみましたがだめでした。

写真を参考にしてください。
https://drive.google.com/file/d/1cxM1UxWC1889bCJ2Z9BtTovtyErgktbI/view?usp=sharing
ご存知のかたご教授をお願いいたします。
- このトピックはsuzu3が4年、 11ヶ月前に変更しました。
2019年12月18日 1:13 PM #28154
suzu3
参加者
追伸です。
Fortの方なら表示は良いようです。

それならFortにフォーマットを変更することもありかなと思います。
その場合はロゴと問い合わせ位置を変更したいです。
ロゴはひだりよりに問い合わせは右に移動できれば、
それはそれで良いかなと思っています。

ご教授よろしくお願いいたします。
- この返信は4年、 11ヶ月前にsuzu3が編集しました。
2019年12月18日 1:54 PM #28157

suzu3
参加者

Fortにフォーマットを変更して
以前質問させてもらった
ものに追記したら一応表示はおもったようになりました。
とりあえずこれでいこうかと思いますが。
もしより良い案があればお願いいたします。

よろしくお願いいたします。

.navbar-brand img {
max-height: 80px;
position: relative;
left:-290px;
}

.siteHeader_sub {
vertical-align: middle;
float:none;
}
.siteHeadContainer.container .navbar-header {
vertical-align: middle;
display:flex;
justify-content:space-between;
align-items: center;
position: relative;
left:140px;

}

2019年12月18日 2:54 PM #28178

suzu3
参加者

ロゴを
left:-290px;
で動かしたら、スマホサイズの時ロゴが
センターでなくなってしまうのを忘れてました。
それはそうですよね。(^_^;)

Htmlもあまり詳しくないので
良い方法があれば教えて下さい。

よろしくお願いいたします。

2019年12月18日 6:10 PM #28223
DRILL LANCER
モデレーター
前回投稿したものに Autoprefixer を使用してベンダープリフィックスを付加したものを書いてみました。
IE 11 ではどうやら特殊なベンダープリフィックスを必要としているみたいです。
```
/*ロゴの大きさを変更*/
@media (min-width: 992px) {
	.navbar-brand img {
	    max-height: 100px;
	}
}

/*お問い合わせエリアを上下中央に配置*/
.siteHeader_sub {
	float:none;
}
.siteHeadContainer.container .navbar-header {
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-pack:justify;
	-ms-flex-pack:justify;
	justify-content:space-between;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}
```
2019年12月18日 6:44 PM #28227

suzu3
参加者

いろいろ教えていただきありがとうございます。
ほんと助かっております。

先程送っていただいて#28223ですが
Fort IIで試したところやはり同じようにグローバルメニューがズレで
背景ズレで表示されてしまいます。
下記のように

勝手がわからず前回の質問に追記してしまったのですが
Fortでの電話番号等問い合わせをセンターにする方法を
方法をおしえていただくことはできけないでしょうか？
Fortだとieでの表示がずれないようなので。

2019年12月18日 6:44 PM #28228

suzu3
参加者

やってみたことをお書きします。
Fort IIで教えていただいた、
下記の記述をFortで追記してみると。
———————————-
/*ロゴの大きさを変更*/
@media (min-width: 992px) {
.navbar-brand img {
max-height: 100px;
}
}

/*お問い合わせエリアを上下中央に配置*/
.siteHeader_sub {
float:none;
}
.siteHeadContainer.container .navbar-header {
display:flex;
justify-content:space-between;
align-items: center;
}
———————————-
ロゴと問い合わせが下記のように中央に寄ってしまいます。
参考
https://drive.google.com/file/d/10KgKwfcaBiXa1uEjMC17w4dc6lo_YKkB/view?usp=sharing

お手数ですがよろしくお願いいたします。

2019年12月19日 10:57 AM #28268
DRILL LANCER
モデレーター
自分も IE 11 で試してみたところ下記で解決できました。

OS：Windows 10 Pro 1909
IE のバージョン：11.5353.13862.0
IE の更新バージョン：11.0.165
```
@media (min-width: 992px) {
	/*IE対応用*/
	.siteHeadContainer.container {
		max-width: none;
	}
	/*ロゴ画像の大きさを拡大*/
	.navbar-brand img {
	    max-height: 100px;
	}
	/*お問い合わせエリアを上下中央に配置*/
	.siteHeader_sub {
		float:none;
	}
	.siteHeadContainer.container .navbar-header {
		display:flex;
		justify-content:space-between;
		align-items: center;
	}
}
```
2019年12月19日 11:19 AM #28269

suzu3
参加者

さすがですね。本当にありがとうございます。
Fort IIの方で表示できました！
何度も助けていただきありがとうございます！
感謝です。
投稿者

投稿