[Vaster2] IE11 のときにヘッダーのレイアウトが崩れていたのを修正しました

2021年04月09日更新

2018年09月14日公開

当サイトはアフィリエイト広告を使用しています

修正後

自分の環境では、IE11 (win10) で表示したさいにヘッダーのレイアウトが崩れていたので修正しました。.Header.Header に margin: 0; を追加しました。（デフォルトのテンプレートにあった border-top は削除してあります）.Header{ width:100%; background-color:#3B5998; padding-bottom: 25px; margin: 0; /* for IE11 */.PageList.PageList に margin: 0; を追加しました。.PageList{ width:100%; background-color:#2f4779; margin: 0; : /* for IE11 */ }未検証ですが、この変更でスマホのときにレイアウトが崩れるようでしたら、「レスポンシブデザイン」@media screen and (max-width: 768px) の .Header , .PageList に margin: initial; を追加すればいいと思いますがどうでしょう……。また、自分の環境では、スマホのときメニューバーのデザインを変えたので、以下も追加しました。#HTML3 { margin: 0; /* for IE11 */ }CSS ハック

css hacks 2020 ( IE11 / Edge / Chrome / Safari / Firefox ) - Qiita

qiita.com

css hacks 2018 ( IE11 / Edge / Chrome / Safari / Firefox )_:lang(x)::-ms-backdrop, というのが使えるようなので試してみました。/* for IE11 */ _:lang(x)::-ms-backdrop, .Header { margin: 0; }/* for IE11 */ _:lang(x)::-ms-backdrop, .PageList{ margin: 0; }ちゃんと動きました。