IEとEdgeでcssのul li要素の記号マーカーがnoneで消えないバグの対処法

こちらの記事を参考にしてみました。

しかし、これらの記事では、list-style-image: url(data:0);を指定すればOKという感じだったのですが、自分の場合はそれでは解決せず、ちょっと状況が違う感じだったので、備忘録および同じ現象にあった人の参考のためにまとめておこうと思います。

結論は、CSSファイルに書いてダメだったので、HTMLファイル側のタグに直接styleを直接書いて、「list-style-type: none;」をダイレクトに指定したら解決しました！

IE/Edgeでliのマーカーが消えないバグの対処法

原因

自分の場合、下記のような状況で、IE/Edgeのマーカーが消えないエラーが発生していました。

・スタイルシートのcssファイルを、jsのdocument.writeで読み込ませていた
・エラーが表示される箇所のHTML要素は最初はdisplay:none;になっており、一定スクロールでblock表示されるようにしていた
・IEとEdgeのブラウザに限り、一定スクロールで表示された部分のli要素マーカーが消えずに勝手に表示されてしまう
・style.cssで、いくらlist-style-type:none;やlist-style:none;を指定しても、マーカーが消えてくれない

ただ、この時、cssファイルをjsではなくて、普通の書き方で読み込ませてみたら、マーカーが消えてくれたので、どうやら自分の状況に限っては、jsのdocument.writeでcssファイルを読み込ませていることが原因だったようです。（読み込みのタイミングがよろしくなかったようです。）

解決法

普通にcssファイルを読み込ませればOKではあったのですが、この時のソースは、どうしてもjs側で指定したい状況だったので、どうにかできないかと試行錯誤してみたところ、答えはとてもカンタンでした。

単純に、HTMLファイルのul部分にstyleを直書きして、「list-style:none;」を指定したらOKでした。

IEとEdgeのul li マーカーのエラーは、読込タイミングが原因で生じるようなので、もしかしたらですが、大体の場合、HTML側に直書きすればOKかもしれません。

まとめ

もし、IEとEdgeのcss ul liのマーカーが消えないエラーが生じた時は、HTMLタグに直接スタイルを書いてみる方法を試してみてください。

ダメな時は、他の方の記事を参考にしてみつつ、色々と試してみましょう！