Ошибка IE8 - отображение родительского узла установлено на none, дочерний узел все еще виден

Question

<div id="menu">
  <li id="light">
    <input type="checkbox" /><span class="icon"></span>Light
    <span class="number">12</span>
  </li>
</div>

#menu {padding-left:5px;margin:5px 0 5px 0;color:#666;}
#menu li{margin:2px 0;line-height:19px;}
#menu input{float:left;}
#menu .icon{margin:0 14px;float:left;height:14px;width:14px;position:relative;top:3px;background:url(img/bgs.gif);background-repeat:no-repeat;}
#menu .number{float:right;margin-right:9px;}
#menu #light .icon{background-position:-266px -484px;}

В коде JavaScript:

var li = document.getElementById("light");
li.style.display = "none";

Все хорошо в Chrome и Firefox.В IE8 флажок и номер исчезли, но значок все еще там.Это ошибка IE8, как ее исправить?

Answer 1

Ли нужно идти внутрь <ul> или <ol>. В противном случае ожидайте неожиданного.