IE で li 要素の記号が消えない問題 / list-style-type: none
マイクロソフトの許可を得て使用しています。Microsoft.com をご覧ください。
jQuery などの JavaScript を活用して ul / ol / li 要素をアコーディオンさせるときなどに、 「・」のマーク(記号)を非表示にできない・消せない問題があります。この問題は特に IE (10, Edge など) で起こります。
一般に要素の記号を消すためには list-style-type: none を設定します。
デバッグしてみるとこの CSS は適用されているのですが、対象の要素が再描画されるまでこの問題は発生します。
問題の発生条件
概ね次のような条件で発生するようです。
- ul / ol / li 要素が何かしらの CSS の設定によって不可視の状態のまま描画される。
- 該当する要素が JavaScript や hover などのイベントによって可視化されるとき、記号が描画されたままになる。
- 該当する要素が一度可視化された後に、イベントやアクションによって再描画が発生すると、記号は描画されなくなる(適切に処理される)。
問題の解決
この問題は JQuery(UI) のフォーラムでも報告されていました。
Menu: Internet explorer 10 renders bullets in submenus - jQuery user interface解決するためには、list-style-image: url(data:0); を設定するしかないようです。
同じ条件で異なる他のブラウザでも同様に動作していることを確認しています。
解決方法にも問題がある
この解決方法にも問題があり、url(data:0) の指定によって、ユーザエージェント(ブラウザ)が無効な情報を取得しようとしている点です。
デバッガを確認すると、url(data:0) はエラーが返ってます。画像データなしとしては扱われていないわけです。
実際に小さな画像データを用意して読み込むよりはパフォーマンスが良いのかもしれませんが、気持ちの良い解決方法ではありません。