ノラWEB屋 野良人(のらんど)- 個人営業のWEB屋さん

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

2017年4月23日

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

【追記】

ここに書いたやり方でやると、リストタグ内でaとかspanのタグが入っているときにグチャーすることに気付きました。
リストの中身はテキストだけ、と決まっている場合は問題ないですが、なんか入るかも、という場合は使わないほうが無難です。
positionで疑似要素の位置を指定する時に発生する微調整とかがいらなくてラクで良いのですが、ご利用の際はお気を付けください。

こういうのしたい

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

サンプルコード

HTML
<ul>
	<li>りんご</li>
	<li>ばなな</li>
	<li>マスカット・オブ・アレキサンドリア</li>
</ul>
CSS
li{
	list-style: none;
	display: flex;
}
li::before{
	content: '>';
}

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

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

結果

chorme

firefox

IE(11)

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

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

解決方法

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

サンプルコード

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

このへんは仕様をちゃんと読み込まないといけないんですが、とりあえず整ったからいいや状態なのでよろしくないです。そんなこと言っているから、いつまでたっても三流なのだよ…。

このエントリーをはてなブックマークに追加