コーディング時に発生したIE11のバグのまとめです。主にflexboxで発生します。
■ display: flexの要素にmin-heightを指定した場合、align-itemsプロパティが動作しない
<p class="title">display: flexの要素にmin-heightを指定</p>
<div class="flex_contents c-min-height">
<ul>
<li><a href="#">メニュー01</a></li>
<li><a href="#">メニュー02</a></li>
<li><a href="#">メニュー03</a></li>
<li><a href="#">メニュー04</a></li>
<li><a href="#">メニュー05</a></li>
</ul>
</div>
<p class="title">display: flexの要素にheightを指定</p>
<div class="flex_contents c-height">
<ul>
<li><a href="#">メニュー01</a></li>
<li><a href="#">メニュー02</a></li>
<li><a href="#">メニュー03</a></li>
<li><a href="#">メニュー04</a></li>
<li><a href="#">メニュー05</a></li>
</ul>
</div>
display: flexの要素にmin-heightを指定した場合、IE11ではalign-itemsプロパティが動作しません。そのため、align-items: centerの指定は無視され、align-itemsプロパティを指定していない状態と同じ表示になります。
min-heightをheightに変更するとalign-itemsプロパティが動作して正しい表示になります。
.flex_contents {
display: flex;
justify-content: center;
align-items: center;
background: #fff;
}
.c-min-height {
min-height: 80px;
}
.c-height {
height: 80px;
}
.flex_contents ul {
display: flex;
}
.flex_contents ul li {
padding: 0 15px;
font-weight: bold;
}
■ flexコンテナにflex-direction: columnまたはflex-direction: column-reverseが指定されている場合、flexアイテムの要素にflex: 1を指定するとレイアウトが崩れる
flexコンテナにflex-direction: columnまたはflex-direction: column-reverseが指定されている場合、flexアイテムの要素にflex: 1を指定するとIE11でレイアウトが崩れます。flexプロパティは、flex-grow、flex-shrink、flex-basisを順番に指定できるショートハンドです。flex-growに1を指定して他の値を省略すると、flex: 1 1 0の指定になりflex-basisが0のためIE11でレイアウトが崩れます。flex: 1 1 autoのように全ての値を省略せずに指定するとレイアウトが崩れが解消します。またはflex-grow: 1のように指定しても大丈夫です。





