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

li需要进入<ul>或<ol>。否则会出乎意料。