IEで表示が崩れる件について

前提・実現したいこと

下記の画像1の状態にしたいです。

が、IEではこうなります。

ご教授いただければ幸いです。

該当のソースコード

php
1<ul class="flow_list">
2      <li class="flow_list-item">
3        <div class="flow_list-item-number-box">
4          <p class="flow_list-item-number">01</p>
5        </div>
6        <div class="flow_list-item-text-box">
7          <h5 class="flow_list-item-title">お問い合わせ</h5>
8          <p class="flow_list-item-text">まずはフォームまたはお電話からお申し込みください。</p>
9        </div>
10      </li>
11...
12</ul>

scss
1.flow_list-item {
2  margin-top: 1.5rem;
3  background-color: $moreThinGray;
4  display: flex;
5  flex-direction: column;
6  @include spc {
7    display: block;
8  }
9}
10.flow_list-item-number-box {
11  display: inline-block;
12  background-color: $yellowOrange;
13  width: 4rem;
14  height: 4rem;
15  @include spc {
16    width: 6.4rem;
17    height: 6.4rem;
18  }
19}
20.flow_list-item-number {
21  height: 100%;
22  display: flex;
23  justify-content: center;
24  align-items: center;
25  font-weight: bold;
26  line-height: 1.8;
27  font-size: 1.6rem;
28}
29.flow_list-item-text-box {
30  display: inline-block;
31}
32.flow_list-item-title {
33  padding-left: 1rem;
34  font-weight: bold;
35  font-size: 1.8rem;
36  display: block;
37  line-height: 2.2;
38  @include spc {
39    display: inline-block;
40    border-right: 1px solid #C3C3C3;
41    width: 21.4rem;
42    padding-left: 2.5rem;
43  }
44}
45.flow_list-item-text {
46  line-height: 1;
47  padding-left: 1rem;
48  font-size: 1.4rem;
49  display: block;
50  padding-bottom: 2rem;
51  @include spc {
52    display: inline-block;
53    padding-left: 5.5rem;
54    font-size: 1.6rem;
55  }
56}

試したこと

参考サイト
(https://ameblo.jp/dnow/entry-11172318010.html)
(https://qiita.com/kiyoami/items/74f2fb1c30d475d35144)
から下記のように修正しましたが、変わりませんでした。

scss
1.flow_list-item {
2list-style-type: none;
3list-style-position:outside;
4*display:inline;
5*zoom:1;
6vertical-align: top;
7}

こちらのサイトの「閉じるタグを無くしてしまう」以外も試してみましたがだめでした。
どうかご教授お願い致します。（編集済み）

補足情報（FW/ツールのバージョンなど）

scssを使っています。

追記

m.ts10806

2021/06/14 21:12

SCSSそのままよりコンパイル後のCSSを提示されたほうが良いと思います。ただ、IEはもう終わるので今から頑張って対応しても、とは思いますが。

Orlofsky

2021/06/14 22:59

IEもEdgeもサポート外と明言しておいた方が貴社のWebエンジニアの阿鼻叫喚が少なくなります。

seakai

2021/06/14 23:03

ありがとうございます。これが解決しなければそうしようと思います…

行動規範の内容に同意します

回答1件

ベストアンサー

基本方針としては、

li要素がflexになっているので、align-items: center;をつけてフレックスボックス内の子要素を上下中央揃えにする
子要素のheight, padding, marginなど上下方向にサイズが伸びそうなプロパティを削除
div.flow_list-item-number-boxも中のp要素を中央寄せにするため、flex指定し、align-itemsとjustify-contentをcenterに設定。

このくらいの修正でIEもだいたい同じように表示することができるようになります。