Microsoft Edge でCSSでlist-style: none
が指定されているにも関わらず、・
や 1.
というリスト(ul, ol)の記号が消えないバグに遭遇しました。
調べているとIEでもこの問題はあったようで
問題の発生条件
概ね次のような条件で発生するようです。
- ul / ol / li 要素が何かしらの CSS の設定によって不可視の状態のまま描画される。
- 該当する要素が JavaScript や hover などのイベントによって可視化されるとき、記号が描画されたままになる。
- 該当する要素が一度可視化された後に、イベントやアクションによって再描画が発生すると、記号は描画されなくなる(適切に処理される)。
今回遭遇したものは、
リストを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
参考
- Edge bug with list-styles · Issue #210 · sonarwhal/sonarwhal.com · GitHub
- CSS list-style bug with IE | Drupal.org
- javascript - Internet Explorer 11 ignores list-style:none on the first load - Stack Overflow
- IE で li 要素の記号が消えない問題 / list-style-type: none – カラクリ.jp
仕事で使える!Google Apps 脱MS Office編 コスト削減&ライセンス最適化ガイド (仕事で使える!シリーズ(NextPublishing))
- 作者: 橋口剛,相村崇,上原哲哉
- 出版社/メーカー: インプレスR&D
- 発売日: 2015/08/07
- メディア: Kindle版
- この商品を含むブログを見る