IE6下空格导致空行的BUG解决方法

今天登陆 http://www.css88.com/，很可惜，不知道什么原因，已经无法登陆，不知是不是被河蟹了。
如果不幸被我言中，真是莫大的悲哀。

今天在开发过程中遇到IE6下，li下的A 链接 加上displya:block;样式会导致li变成2行显示，后来发现时</li>标记后有一个空格。

空格导致多了一个回车。很奇怪吧！

这是一个比较正常的HTML代码：

 

   <ul class="test">
2         <li><a href="#">第1条连接</a></li>
3         <li><a href="#">第2条连接</a></li>
4         <li><a href="#">第3条连接</a></li>
5     </ul>

想要实现的效果如下：
 

使用css样式为：

 

        *
        {
            padding: 0;
            margin: 0;
        }
        .test
        {
            width: 300px;
            list-style: none;
            list-style-type: none;
        }
        ul.test li
        {
            list-style: none;
            list-style-type: none;
        }
        ul.test li a
        {
            background: #CCC;
            border-bottom: 1px #000 solid;
            text-decoration: none;
            display: block; 
        }
        ul.test li a:hover
        {
            background: #BBB;
        }

但是，在IE6下，实际的显示效果为:

 

很是神奇，竟然每个li多出一行。

有以下解决方法：

 

 

 *
        {
            padding: 0;
            margin: 0;
        }
        .test
        {
            width: 300px;
            list-style: none;
            list-style-type: none;
        }
        ul.test li
        {
            list-style: none;
            list-style-type: none;
            display:inline ;/*方法3：在此增加display属性*/
        }
        ul.test li a
        {
            background: #CCC;
            border-bottom: 1px #000 solid;
            text-decoration: none;
            display: block; 
            width:100%;/*方法1：在此增加width属性*/
            zoom:1;/*方法2：在此增加zoom属性*/
        }
        ul.test li a:hover
        {
            background: #BBB;
        }

 

以上，红色下滑字体为重要代码，经测试，以上任何一种方法均对ie6有效