カテゴリー: IE

IE11

モダンブラウザーは問題ないがIEのみbootstrap4のcardのレイアウトが崩れる。加増もコンテンツ幅に合わせて縮小されない！bootstrap4をサポートしていない要素がある模様。花の湯館と田中石材のコンテンツに問題がでた。

containerで内容されているにもかかわらず、該当要素の手前に別な要素があるとレイアウト崩れを起こすようだ。IE対策として、card使うときは要素ごとにcontainerでくくったほうが良い。 

田中石材でもなったが、全体のcontainerにくるまっていればきちんとひょうじされた。

※d-flexやcard　の直前にcontainerをいれないとレイアウトが崩れるのでcontainerをいれる事。

※↓の状況の時は、containerの直後にはrowは入れない。入れるとレイアウト崩れる

例：new-sanetsu/goods/

<div class=”container”>
<div class=”d-flex align-items-stretch card-deck ” >

<div class=”offset-sm-3 col-sm-6 mb-4″ >
<a href=”#” >
<div class=”card mb-4 d-block” >
<figure><img src=”../n-image/qa/item1.jpg” class=”card-img-top img-fluid d-block mx-auto h-100″ alt=””/></figure>
<div class=”card-body”>

<p class=”card-text”>特定の時期・季節を中心に販売される季節商品もご用意しております。雛人形や五月人形、正月飾りなど、季節ごとの様々なイベント用商品を取り揃えております。
こんなイベントには、どのようなギフトを用意すればいいかわからない等のお悩みありましたら、お気軽にサンエツまでご相談ください！</p>
<span class=”badge btnGoods text-center w-100″ style=”padding:5px; font-size:120%;”>見る</span>
</div>
</div>
</a>
</div>

</div>
</div>

---

 

また、ネストされている要素があるばあいもcontainerでくくらないと崩れる

例　new-sanetsu/company

<div class=”container“>
<div class=”row”>
<div class=”col-sm-4 text-center mb-3″>
<img src=”../n-image/company/itagawa.jpg” class=”img-fluid mx-auto mb-2  ” alt=””/>
<small>株式会社サンエツ<br>代表取締役　板川信夫</small>
</div>

<div class=”col-sm-8 px-4 text-left”>
<p>「ギフトを通して、人と人との心をつなぎ、社会生活をより豊かによりスムーズにするために努力をし、地域社会の発展に貢献をいたします。」を経営理念とし、会社運営に取り組んでまいりました。</p>
<p>お陰さまで創業46年を迎えました。</p>
<p>「ギフトを通して、人と人との心をつなぎ、社会生活をより豊かによりスムーズにするために努力をし、地域社会の発展に貢献をいたします。」を経営理念とし、会社運営に取り組んでまいりました。お陰さまで創業46年を迎えました。</p>
<p>これを機に、更なる皆様のご期待に添えますよう、全店にてお品を販売するだけではなく、お品をお求めの元となる「行事」や「人付き合い」がうまくいきますよう、全力でご相談にのらせていただきます。</p>
<p>そして、日本一親切な会社を目指します。</p>
<p>今後とも御指導、御鞭撻の程、何卒よろしくお願い申し上げます。</p>
</div>

</div>
</div>

 

---

画像が伸縮されずに縦に長く表示される件の解決策は

【bootstrap4】ie11でcard-img-topクラスの画像が縦に伸びる

Internet Explore11かbootstrap4のバグのようです。
https://github.com/twbs/bootstrap/issues/21885
こちらのサイトの投稿を参考にして２つ試してみました。

対応１）h-100クラスをimgタグに追加

↓これいらないかも

<div class="card">
   <img class="card-img-top h-100" src="" alt="">

 

↓こっちで対応OK

対応２）d-blockクラスをcardクラスに追加

<div class="card d-block">
<img class="card-img-top" src="" alt="">

どちらも正常に表示されるようになりました！