グーグルとIeの表示のされ方が違う。グーグルのような表示にしたい。

グーグルで写真のように作成したHPが表示されますがIe（バージョンInternetExploror11）だと重なって表示されたり、下のコンテンツに隠れてしまったりします。
①と②の二か所でどちらもflexboxで横並びに作ったものをそれぞれ960px以下、1024px以下のときに縦並びになるように設定したところ以上の問題が生じました。
写真1と3がグーグルのもの、写真2と4がIeのものです。横になってしまって申し訳ありません。
論理的に教えていただけるのもありがたいのですが可能であればコードで示していただけると大変助かります。
よろしくお願いいたします。

①
写真1

写真2

html

                    
        
                    <div class="f-container">
                        <div class="f-item01">
                            <img class="contact_ill01" src="images/1425957_42.png" alt="">
                            <h3>お問い合わせ<br><span>Contact</span></h3>
                            <div class="contact"><a href="tel:0222222222"><i class="fas fa-phone-alt"></i>022-222-2222</a><br><span class="contact_text">電話受付<br>AM 9:40~12:20<br>PM 15:00~18:00<br>休診<br>土曜午後と日曜祝日</span></div>
                            </div>
                        <div class="f-item03"></div>
                        <div class="f-item02"><img class="contact_ill02" src="images/1425957_45.png" alt=""><h3>アクセス<br>
                    <span>Access</span></h3><br>
                    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3133.2192738067165!2d140.9330363156616!3d38.25122019237652!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x5f89881166f15933%3A0xd6cd003a0d26ae70!2z44GC44GE44Gv44KJ5q2v56eR5Yy76Zmi!5e0!3m2!1sja!2sjp!4v1580758112430!5m2!1sja!2sjp" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen=""></iframe>
                        <div class="access_text">○○駅(地下鉄東西線)から徒歩1分!!<br><span class="address">○○県○○市●●区●●3-41 阿部ビル●●</span></div></div>
                    </div>
                     </div>
コード

css


.box3{ 
    margin-bottom: 50px;
    padding-bottom: 50px;
    display: block;
    clear: both;
}

.f-container{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    align-items: stretch;
}

.f-item01,.f-item02{
    display: flex;
    justify-content: center;
    display: block;
    flex-direction: row;
    flex-wrap: nowrap;
    flex-basis: 40%;
    text-align: center;
    box-shadow: 2px 2px 4px;
}

.f-item03{
    display: flex;
    justify-content: center;
    display: block;
    flex-direction: row;
    flex-wrap: nowrap;
    flex-basis: 5%;
    text-align: center;
}
 
.f-item01 h3,.f-item02 h3{
    font-size: 25px;
    line-height: 1;
    padding-top: 30px;
    font-weight: 500;
}

.f-item01 h3 span,.f-item02 h3 span{
    font-size: 15px;
    line-height: 1;
}

.contact a{
    font-size: 40px;
    text-decoration: none;
    color: #000000;
    padding-top: 20px;
    margin-bottom: 10px;
    display: block;
}

.contact .contact_text{
    text-align: left;
    display: block;
    padding-left: 30%;
    font-size: 18px;
}

.f-item02 iframe{
    width: 80%;
    margin-top: 10px;
}

.f-item02 .access_text{
    text-align: center;
    font-size: 20px;
    color: #a5233f;
    padding-bottom: 20px;
}

.f-item02 .address{
    font-size: 18px;
    color: #000000;
}
/* お問い合わせ・アクセスflexbox使用ここまで */

/* お花をboxに重ねる */

.contact_ill01,.contact_ill02{
    margin-top: -20px;
}


/* お問い合わせ・アクセスを横並びにする */
.box3:after{
content: "";
display: block;
clear: both;}


.contact_name{
    float: left;
    margin-top: 10px;
}

.access_name{
    float: right;
}

iframe{
    width: 80%;
    height: 300px;
    margin-top: 30px;
}

/* お問い合わせとMAPを縦に並べる MAPが上にくるように設定*/
@media (max-width:960px) {
    .f-container{
        flex-direction: column;
        align-items: flex-start;
        flex-direction: column-reverse;
    }
    
    .f-item01{
        left: 0;
        right: 0;
        display: block;
        margin: auto;
        width: 70%;
        margin-top: 30px;
        padding-bottom: 20px;
    }
    
    .f-item02{
        left: 0;
        right: 0;
        margin: auto;
        width: 70%;    
    }
}
コード

②
写真3

写真4

html

                
                <h2>あいはら歯科医院</h2><p class="furigana">AIHARADENTALCLINIC</p>
                
                <div class="c-container">
                <div class="c-item01">
                    <div class="lf2"><img src="images/leaf_11.png" alt=""></div>
                    
                    <li class="address01"><h4>お問い合わせ<p class="furigana01">Contact</p></h4><br>
                        <a href="tel:0222222222">
                        <i class="fas fa-phone-alt"></i>022-222-2222</a><br>
                        <p class="footercontact_text">電話受付<br>
                            AM 9:40~12:20<br>PM 15:00~18:00<br><span class="call_me">お気軽にお問い合わせください。</span><br>
                            休診<br>土曜午後と日曜祝日<br>
                    <span class="adderess">住所 <br>○○県○○市●●区●●3-41 阿部ビル●●</span></p>
                        <p class="call_me"></p>
                    </li>
                </div>
                
                <div class="c-item03"></div>
                <div class="c-item02" id="opentime">
                <li class="address02">
                    <h4>診察時間</h4><p class="furigana02">Opentime</p>
                    <figure id="opentime"><img src="images/opentime_54.png" alt=""></figure>
                </li>
                    </div>
                </div>
                </div>
コード

css

.box5{
    padding-top: 60px;
}
h2{
    font-size: 30px;
    text-align: center;
    font-weight: 600;
}
p.furigana{
   font-size: 15px;
    text-align: center;
    margin-bottom: 25px;
    font-weight: 500;
}

/* お問い合わせと診察時間のflexbox */

.c-container{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    align-items: stretch;
    margin-top: 50px;
}

.c-item01,.c-item02{
    display: flex;
    justify-content: center;
    display: block;
    flex-direction: row;
    flex-wrap: nowrap;
    flex-basis: 40%;
    text-align: center;
}

.c-item03{
    display: flex;
    justify-content: center;
    display: block;
    flex-direction: row;
    flex-wrap: nowrap;
    flex-basis: 15%;
    text-align: center;
}

.address01,.address02{
    list-style: none;
}

/* 診察時間の画像 */
#opentime img{
    width: 100%;
}

/*  お問い合わせの設定 */
/* お花とお問い合わせを重ねる */
.c-item01{
    position: relative;
}


.address01{
    position: absolute;
    top: 0;
    left: 30%;
}


.address01 a{
    font-size: 30px;
    color: #000000;
    text-decoration: none;
    margin-bottom:5px;
    display: block;
    list-style: none;
    text-align: center;
    line-height: 1;
}

.address01 a i{
    font-size: 25px;
    padding-right: 10px;
    line-height: 1;
}

.footercontact_text{
    text-align: left;
    margin-left: 20px;
}

/*  お問い合わせと診察時間の題名とふりがなの調整 */
.address01 h4,.address02 h4{
    font-size: 20px;
    text-align: center;
    vertical-align: bottom;
    font-weight: 550;
}

.furigana01,.furigana02{
   font-size: 12px;
    text-align: center;
    margin-bottom: 25px;
    font-weight: 500;
}

/* お問い合わせください。の位置を調整*/
.call_me{
    color: #549236;
    text-align: left;
}

@media (max-width: 1024px){
    
  /* box4のお問い合わせと診察時間を縦に並べる*/  
    .box4:after{
    content: "";
    display: block;
    clear: both;
}
    .c-container{
        flex-direction: column;
        align-items: flex-start;
        flex-direction: column-reverse;
    }
    
    .c-item01{
        padding-bottom: 200px;
        left: 0;
        right: 0;
        display: block;
        margin: auto;
        margin-top: 40px;
    }
    
    .c-item01:after{
        content: "";
        display: block;
        clear: both;
    }
    
    .c-item02{
        left: 0;
        right: 0;
        margin: auto;
    }
    
    .c-item01 .address01{
        left: 0;
        right: 0;
    } 
}

コード

kalon

2020/02/21 20:14

可視性も悪いので、スクリーンショットはカメラではなく、PCのPrint Screenで撮影してアップしてください。

m.ts10806

2020/02/22 00:18

「いくらでも時間と費用を割ける前提」なら対応はできるでしょうけど、「コードくれ」って言ってる時点で質問になってません。

kyoya0819

2020/02/22 01:08

GoogleじゃなくてChrome ( Google Chrome ) です

otn

2020/02/22 01:30

何故横向き写真？？

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

回答4件

通常、IEは使わないことで解決します。
それ以外の選択肢は時間と労力の無駄です。

投稿2020/02/21 20:44

Orlofsky

総合スコア16417

raccy

2020/02/21 21:34 編集

IEを使うか使わないかを選択するのはサイトを見に来る側ではないのですか？質問者さんがいくら「IEは使わない」としても、何も解決にならないと思います。

Orlofsky

2020/02/21 21:58

当サイトではIEはサポートしていません、と追記して終わり。 Windows Updateを実行したら画面が崩れるとか、IE対応を強要されてバグに泣かされて辞めていった人を何人も見ています。

m.ts10806

2020/02/21 22:20

確かに対応コストのほうが無駄に高くなるというのは分かりますが。質問者は「コードくれ」って言ってるので妥当なアドバイスかもしれませんね。 QAで解決するには無理がありそう。

kyoya0819

2020/02/22 01:09

Orlofskyさんの意見に賛成です。いつまでもIEに時間等を割くのは非現実的です。

kyoya0819

2020/02/22 01:11

と思ったけど、まだ意外とシェアがあって悩みどころ https://gs.statcounter.com/browser-version-market-share/all/japan

hatena19

2020/02/22 01:33

https://webrage.jp/techblog/pc_browser_share/ だと、国内では２位(12.14%)とのことなので無視しづらい。世界だと3.3%なので無視してもいいですが。

kyoya0819

2020/02/22 01:36 編集

一応書いておくと、私が貼った先だと4位ですね Chrome iPhoneSafari AndroidChrome IE ... 7.26% (2020/1)

hatena19

2020/02/22 01:52

私のリンク先の記事では asuchi0819さんとおなじところを参照元とかいてありますが、7.26%が正しいですね。この記事が間違っているようです。

raccy

2020/02/22 02:00

> 当サイトではIEはサポートしていません、と追記して終わり。この一言をコメントではなく、回答に書いて欲しかっただけなのですが。詳しい人達はよくわかっていることですが、始めたばかりの人達はIEに関する諸々の事情は詳しく知りませんので、勘違いしそうな気がします。

x_x

2020/02/27 02:35

> hatena19 さん記事通りに2020年1月(1か月間)のみ、日本、デスクトップという条件にすると12.14%となり、何も間違っていません。 https://gs.statcounter.com/browser-version-market-share/desktop/japan/#monthly-202001-202001-bar

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

ベストアンサー

サンプルを作って確認してみたところ、IEは、flexでの縦並び(flex-direction: column;あるいはflex-direction: column-reverse;)するとそのような症状がでるようです。

他の回答者さんも言われてるように他にもいろいろバグがあるようですので「IEはサポートしていません」ですましてもいいと思います。

ただ、縦並びにするだけなら、flexを使わなければいいだけですので、とりあえずはそれで対応してもいいでしょう。

css
1@media (max-width:960px) {
2    .f-container{
3/* 削除
4       flex-direction: column;
5        align-items: flex-start;
6        flex-direction: column-reverse;
7ここまで */
8        display: block; /*追加*/
9    }

display: block;を追加するだけで縦並びになります。ただし、逆順にはならないので、HTMLの方で上下入れ替えておいて、横並びを逆順にすればいいでしょう。

css
1.f-container{
2    display: flex;
3    flex-direction: row-reverse; /*変更*/
4    flex-wrap: nowrap;
5    justify-content: center;
6     align-items: stretch;
7}