かもメモ

自分の落ちた落とし穴に何度も落ちる人のメモ帳

Microsoft Edge リスト要素の記号が消えないバグ(list-style: none が効かない)にハマる。

Microsoft EdgeCSSlist-style: noneが指定されているにも関わらず、1. というリスト(ul, ol)の記号が消えないバグに遭遇しました。

調べているとIEでもこの問題はあったようで

問題の発生条件
概ね次のような条件で発生するようです。

  1. ul / ol / li 要素が何かしらの CSS の設定によって不可視の状態のまま描画される。
  2. 該当する要素が JavaScript や hover などのイベントによって可視化されるとき、記号が描画されたままになる。
  3. 該当する要素が一度可視化された後に、イベントやアクションによって再描画が発生すると、記号は描画されなくなる(適切に処理される)。

出典: IE で li 要素の記号が消えない問題 / list-style-type: none – カラクリ.jp

今回遭遇したものは、
リストをflex-boxにして、flex-direction: row;flex-wrap: wrap;でli要素を横並びにしたもので、IE11では問題がなく、Edgeのみlist-style:none;が効かずリストの記号が表示されてしまうというものでした。(※ 複合的な理由である可能性が高いので必ずしもflexの指定が原因だとは限りません)

解決方法として、

1. ul { list-style-image: url(data:0); }
2. ul { list-style-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7); }
3. ul { list-style-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=); }

list-style-image に無効や空画像を当てはめるようなハックがありましたが、私の遭遇したものでは残念ながらこれらの方法では解決せず...
💩ブラウザのためにHTML構造を変更するのは少し癪でしたが、IE・Edge対応が必要な案件だったので ul li をdivに変更することで回避しました。

スクロールが効かない問題でIEとEdgeを調べたら同じ会社の製品で動くタグが違っていたり、本当にマイクロソフトの作るブラウザはクソなので、マイクロソフトはブラウザ作るの辞めて欲しいです...
WEBサイト作る(PCを使う)人は、たぶん腐った牛乳ことIE6時代からマイクロソフトに対して凄いHATEが溜まってると思うので、この💩ブラウザがあると事業的にも逆効果な気がしてるのですが… (僕はHATEが溜まりすぎてて既にMS office製品も使用しない主義者ですがw


参考