Question

我遇到了一些代码和ie7浏览器的问题，它是一个用ul标签和css属性制作的垂直CATEGORY菜单。使用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;
                }

这是糟糕的渲染，请注意大左边边缘的类别菜单 alt text

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

Answer 1

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

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

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

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

1 个答案: