CSSのFlexボックスを使って「タイトル、テキスト、画像」を縦に配置したカード型のボックスを作り、それらのボックスを横に並べるとします。ここで互いに高さがバラバラな画像をボックス内で下揃えしたい（下図）。ところが、IE11だ表示が崩れてしまいハマりました。その回避策のメモです。
See the Pen
[CSS] Workaround for flexbugs about margin-top on IE11 by Kazuhiro Hashimoto (@kaz_hashimoto)
on CodePen.
Flexボックスで上記のような下揃えを実現するには、img要素を囲むflexアイテムのdivにmargin-top: autoを指定してやればうまくいくハズです。
CSS仕様: CSS Flexible Box Layout Module Level 1
9.5. Main-Axis Alignment
12. Distribute any remaining free space.
html
<div class="card">
<div class="title">タイトル</div>
<p class="text">テキスト</p>
<div class="image"><img src="foo.jpg" alt=""></div>
</div>
css
.card {
display: flex;
flex-direction: column;
}
.image { /* flexアイテム */
margin-top: auto; /* free spaceが分配されるハズ */
}
.image img {
width: 100%;
height: auto;
vertical-align: top; /* div内で隙間を消す */
}
ところがIE11だとうまくいきません（下図）。img要素を囲むdiv（赤枠)のmarginではなく高さの方が伸びて、img要素がdivの上側に配置されるため下側に大きな余白ができてしまい下揃えになりません。
IE11の場合、img要素を囲むdivにmin-heightを0以外の確定値(px)で設定してやればこの問題を回避できるようです。
css
.image {
margin-top: auto;
min-height: 1px; /* IE11 */
}
IE11でも画像の下揃えを実現できました（下図）。
追加したmin-heightの設定はIE11以外のブラウザには不要な設定ですが、残しておいても影響ありません。
↧