css html ie7（ul和li标签）菜单问题

Question

我遇到了一些代码和 ie7 浏览器的问题，它是一个垂直的 CATEGORY 菜单，由 ul 标记和 css 属性组成。在 safari、ie8、firefox 3.5 和 3.6 上运行良好，但在 ie7 下，正在创建一个大的左边距 这是服务器正在生成的代码：

    <div id="menu">  
    <ul><li><a class="level1" href="catalog.html?category=21">PRODUCTOS</a></li>  
<li><a class="level1" href="catalog.html?category=21">Daniela Kosan</a></li>  
<li><a class="level2" href="catalog.html?category=21">Lo Nuevo</a></li>  
<li><a class="level2" href="catalog.html?category=22">Fragancias</a></li>  
<li><a class="level2" href="catalog.html?category=23">Rostro</a></li>  
<li><a class="level2" href="catalog.html?category=24">Accesorios</a></li></ul>
    </div>

这是我正在使用的 css：

*{ 边距顶部：0； 填充：0； }

#menu{
    background:#fff;
    width:205px;

    padding-left:9px;

}
    #menu ul{
        list-style:none;


    }
        #menu li{
            list-style:none;


        }
            #menu li a{
                list-style:none;
                font-family: arial, sans-serif;
                background:#F0CFD6;
                color:#944862;
                text-transform:none;
                font-size:14px;
                font-weight:normal;
                text-decoration:none;
                display:block;


            }
                #menu li a:hover{
                    color:#fff;
                    text-decoration:none;
                }
            #menu li a.level1{
                padding-left:10px;
                padding-top:10px;
                width:205px;
                height:20px;
                color:#fff;
                background:#DA8298;


            }
                #menu li a:hover.level1{
                    color:#000;
                }
            #menu li a.level2{
                padding-left:20px;
                padding-top:12px;
                width:205px;
                height:20px;
                color:#8B5169;
                border-width:0 0px 0px 0px;
                background:#F0CFD6;
                border-bottom:1px dashed #CEABB2;

            }
                #menu li a:hover.level2{
                    color:#000;
                }

这是错误的渲染，请注意类别菜单旁边的大左边距

这就是它在其他浏览器上的呈现方式......很好！谢谢你们！

Answer 1

尝试在ul 上设置边距和内边距。不同的浏览器会自动将其设置为不同的东西。我建议以后使用CSS reset。

#menu ul {
    margin-left: 0px;
    padding-left: 0px;
    }

试试上面的方法，让我知道它是否有效。我没有IE，所以无法测试。我会一次测试一个边距并填充一个，看看是否只有其中一个是罪魁祸首。