2020.10.19

HTML・CSS

コーディング時のIE11のバグ

コーディング時に発生した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のように指定しても大丈夫です。

関連記事

2024.08.16

HTML・CSS

flex-shrinkで文字の改行を防ぐ

flexボックスのレイアウトで、flexアイテムにflex-shrinkプロパティを指定してテキストが改行されるのを防ぎます。デモページはこちら 以下のhtml…

2022.09.29

HTML・CSS

positionプロパティとz-indexプロパティによる重なり

positionプロパティとz-indexプロパティによる重なりを確認します。デモページはこちら 以下のhtml構造で確認します。クラス名div-childのd…

2020.08.30

HTML・CSS

Font Awesomeの使い方

Font Awesomeの公式サイトで使用したいアイコンフォントを選びます。Iconsのページでアイコンフォントの一覧が確認できます。有料版と無料版があり有料版…

2021.07.06

HTML・CSS

Photoshopのドロップシャドウをbox-shadowプロパティで適用

Photoshopのレイヤースタイルで作成したドロップシャドウを、box-shadowプロパティで適用します。デモページはこちら box-shadowプロパティ…

2024.08.28

HTML・CSS

text-shadowで作る縁取りの文字

text-shadowプロパティを複数指定して、縁取りの文字を作ります。デモページはこちら text-shadowはbox-shadowと違い、広がりの距離とi…

上に戻る