IE6 bug: about with a img in a block hyperlink

IE6 bug: while you add a <img /> in <a></a>(within <li></li>) which has been set to block element, that you will find a little blank in the bottom of your <li></li>, so the next <li> will misplacement. Here is an example:

   <ul id="innerMenu">
2     <li><a  href="/activ/01/01/default.asp?id=1"><img src="/images/activity/transparentInner.gif" border="0" /></a></li>
3     <li><a  href="/activ/01/02/default.asp?id=1"></a></li>
4     <li><a  href="/activ/01/03/default.asp?id=1"></a></li>
5     <li><a  href="/activ/01/04/default.asp?id=1"></a></li>
6   </ul>

and css：

 1 #innerMenu {
 2     background: url(../images/innerMenu.gif) 0 0 no-repeat;
 3     margin: 0 auto;
 4     margin-top: 3px;
 5     width: 161px;
 6     height: 172px;
 7 }
 8 #innerMenu li {
 9     list-style: none;
10     width: 161px;
11     height: 42px;
12     margin-bottom: 1px;
13     overflow: hidden;
14 }
15 #innerMenu li a {
16     width: 161px;
17     height: 42px;
18     display: block;
19 }
20 #innerMenu li a img {
21     margin: 0;
22     padding: 0;
23     border: 0;
24 }
25 #innerMenu li a:hover {
26     width: 161px;
27     height: 42px;
28     background: url(../images/innerMenu.gif) -161px 0 no-repeat;
29 }

have a try, and browser in IE6, you will find a black between first <li> and second <li>, it's very strangely only in ie6. Try again and again, i found the problem of this, because of set <a> as a block element, delete "display: block" of <a> and refresh your page, it's ok!