html - css html ie7(ul和li标签)菜单问题

Question

我在使用一些代码和 ie7 浏览器时遇到了问题，它是一个用 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 future 。

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

试试上面的方法，如果有效请告诉我。我没有IE，所以我无法测试它。我会一次测试边距和填充，看看是否只有其中一个是罪魁祸首。