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のように指定しても大丈夫です。

関連記事

2025.08.08

HTML・CSS

fit-contentのセンタリングを利用した横幅可変のグラデーション背景

width: fit-contentを利用してテキストをセンタリングし、グラデーションの背景を表示します。デモページはこちら 以下のhtml構造で確認します。d…

2024.09.02

HTML・CSS

box-shadowとfilter: drop-shadowの違い

box-shadowプロパティとfilterプロパティのdrop-shadowを比較して違いを確認します。デモページはこちら filter: drop-shad…

2024.09.22

HTML・CSS

linear-gradientで作る格子模様と市松模様

background-imageプロパティのlinear-gradientで、1pxの線のみの格子模様と塗りと塗り無しの市松模様を作成します。デモページはこちら…

2020.07.18

HTML・CSS

CSSアニメーションで画像を横スクロール無限ループ

CSSアニメーションで画像を横スクロール無限ループさせます。まずhtmlのコードです。同じ画像を2つ配置して、クラス名loop_wrapのdivタグで囲います。…

2020.06.27

HTML・CSS

iOSのブラウザでセレクトボックスの文字を省略せずに表示

iOSのブラウザではセレクトボックスに長いテキストの選択肢がある場合、途中で省略して表示されます。省略記号「…」が付いて選択肢が最後まで読めません。これを全て表…

上に戻る