Bootstrap4 IEでcardのレイアウトが崩れた場合
お久しぶりでございます。
引っ越しやら、未だに辞めずに働いている意にそまぬ仕事のクソ忙しさやら、掘っても掘ってもニョキニョキしてくる筍の調理やらでとにかくかつてないほどに忙しい毎日でおかげさまでございますが、そんな最中、某クライアントからお電話で『ホームページをスマホ対応にしたい』というありがたいオファーを頂き、（元々スマホでも見られるように作ってあるんですけどね、どなたかの入れ知恵で昨今の流行りのレスポンシブにしたいと思われ）、一日10時間半勤務（これが固定勤務時間ってどういう事よ、労働基準監督署に誰か駆け込んでくれ）のおかげで、日々ほとんどPCに向かう時間がないという中、老骨に鞭打ってレスポンシブwebサイトへ全面リニューアル作業。
さて、Adobe Museで久々にサクッと作るか…と思ったら、あらら、Museが終了予定ですって？
ほほん。代わりにXD使え？コーディングできねぇじゃん。
って訳で、あれこれ試した結果、やはりいつものDreamweaver、でも初のBootstrap。
新しいものをあれこれ試すのは面白いねー
このところずっと既存のサイトの更新だったから、Bootstrap試しながらあれこれ…楽しいねー
って、まぁ時間はかかったものの、おおよそ構想どおりに出来上がってさて、クライアントにデモページ見せる前にIEでもチェック ・・・・・・ はぁ？？ってくらい見事にcardのレイアウトが乱れまくり。
card columns でどわっと並べたものが、なんでカードの途中で切れて隣の列へ移動してんじゃ
この広大かつ無駄な余白はなんじゃ
通常使っているのはVivaldi。問題なし。
Edgeで見ても問題なし。
iPhone、iPad問題なし。
ヲイ、IE、なにやってんだ(-_-メ)
ともかくFixです、fix。
って、ネットであれこれ情報をさがしたけど、互換表示の設定では直らん、もちろん互換表示回避のMetaも入ってます。
検索＆トライすること約２時間。
ふん、わからん。
card-groupやら card-deckやらに変えてみたけどもっとだめ。
ふふん
試行錯誤の末に行き着いたのが、下記の方法。
●card bodyに入れてあった画像をcard bodyの外に出す。
●img-fluid のクラスを使わず、従順に card-img-top に変更。
●画像のclassはこれ → class=”card-img-top h-100 mw-100″
ここまでで、ほぼ表示は改善されたのですが、まだ若干のズレが残ってる。
どうも、並んだカードのサイズが均一ではなくて、はみ出した分が切れて隣の列へ改行されてるようなので
card-text の文字数を調整して、各列の高さが同じくらいになるように修正。
地味でブサイクな方法だけど
これでIEの表示も他のブラウザと同様、cardレイアウトの崩壊が修正できました^^;
もっと素敵でエレガントな方法があったら教えて欲しいわぁ
でも、現状打開策がないと先へ進めないので、これで良しとしておきます。
もしも、どなたかどーしても変なスペースがカードの最後に入って、カードが途中で途切れて隣の列の上に表示されてしまう…
こんな症状でお困りの方がいらっしゃいましたら、ダメ元で上記の方法を試してみてくださいー
（結果、だめだったらゴメンナサイ、責任はとれませんがっ！）
それにしてもIE、お前ってやつは…ますますキライになったぜ