【CSS】flexboxで疑似要素を扱うときのIEの注意点

flexbox楽しいし便利だけどバグもぽろぽろ。疑似要素について。

1. こういうのしたい
   1. サンプルコード
   2. 結果
2. 解決方法
   1. サンプルコード
   2. 注意

こういうのしたい

リストタグのスタイルをデザインするみたいなやつを疑似要素でやります。配置をflexboxでやります。

サンプルコード

<ul>
	<li>りんご</li>
	<li>ばなな</li>
	<li>マスカット・オブ・アレキサンドリア</li>
</ul>

li{
	list-style: none;
	display: flex;
}
li::before{
	content: '>';
}

※ベンダープレフィックスとかは付けると見にくくなるのでサンプルでは無視。

※デザインもくそもないサンプルで恐縮です。

結果

chorme

firefox

IE(11)

このように1行の場合はchorome、firefoxはうまくいきますが、折り返す際にIEではインデントが揃いません。

疑似要素の高さが、他のブラウザでは上下目いっぱいになるところが、IEだけはインライン要素みたいな挙動になるようです。align-items: stretch;とかを指定しても同様。

解決方法

display:block;を指定してやると整います。

サンプルコード

li::before{
	content: '>';
	display: block;
}

<ul>
	<li>りんごの産地は<a href="">こちら</a></li>
	<li><p>ばななの産地は<a href="">こちら</a></p></li>
</ul>