BLOGブログ

IE11でBootstrap4のflexで意味不明な縦空白

takefushi / 2019.04.22

Web関連 Web制作・ホームページ制作

Bootstrap4を使ってコーディングしたサイトで、何故かIE11で閲覧したら意味不明なマージン?パディング?の縦の空白が発生しました。

「h-100」Classを追加すれば直るという話があったが直らない。。

d-blockでは直るが、どうしてもflexが使いたい。。

そんな中、凄く時間がかかってたどり着いた直し方は、以下の方法。

min-height: 1%;

最小高さを1%追加したブロックで空白が発生するhtmlを囲む、もしくはその原因ブロックに最小高さ1%を追加してあげると直ります。

何故1%?0%でも良いじゃん!と思うかも知れませんが、sassやscssなどを使っていると、0%だと、0pxに自動変換されてしまったため、1%を付与してあげると確実に直ります。

完全に裏技的な直し方ですが、悩まれた方は、ぜひ、お試しください!