IE8 bug?parent node display set to none,child node still visible

<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;}

In javascript code:

var li = document.getElementById(开发者_如何学C"light");
li.style.display = "none";

Everything is ok in chrome and firefox. In IE8,the checkbox and number is disappeared but icon still there. Is that a bug of IE8, how to fix it?

li's need to go inside <ul> or <ol>. Otherwise expect the unexpected.