Question

我使用CSS和jQuery使用无序列表创建了一个下拉菜单。问题是在firefox中列表项的间距不相等。它适用于Chrome和IE。我尝试过使用reset.css但它也不起作用：http://jsfiddle.net/dyUwm/20/

HTML

<html>
<body>
<head>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.8.0/build/cssreset/cssreset-min.css">
</head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id='wrapper'>
<ul class="menu">
    <li><a href="#">QUEM SOMOS</a>
        <ul>
            <li><a href="/ViaZen/faces/quemSomos/apresentacao.xhtml">Apresentação</a></li>
            <li><a href="/ViaZen/faces/quemSomos/diretoria.xhtml">Diretoria e Conselhos</a></li>
            <li><a href="/ViaZen/faces/quemSomos/nossaHistoria.xhtml">Nossa História</a></li>
            <li><a href="/ViaZen/faces/quemSomos/nossosMestres.xhtml">Nossos Mestres</a></li>
            <li><a href="/ViaZen/faces/quemSomos/nossaSanga.xhtml">Nossa Sanga</a></li>
        </ul>
    </li>
    <li><a href="#">O ZEN BUDISMO</a>
    <ul>
            <li><a href="/ViaZen/faces/oZenBudismo/pratica.xhtml">Prática</a></li>
            <li><a href="/ViaZen/faces/comoParticipar/retiros.xhtml">Sesshins (Retiros)</a></li>
            <li><a href="/ViaZen/faces/oZenBudismo/datas.xhtml">Datas Comemorativas</a></li>
            <li><a href="/ViaZen/faces/oZenBudismo/textos.xhtml">Textos e Sutras</a></li>
            <li><a href="/ViaZen/faces/oZenBudismo/sugestoes.xhtml">Sugestão de Leituras</a></li>
        </ul>
    </li>  
    <li><a href="#">COMO PARTICIPAR</a> 
        <ul>
            <li><a href="/ViaZen/faces/comoParticipar/programacaoRegular.xhtml">Programação Regular</a></li>
            <li><a href="/ViaZen/faces/comoParticipar/retiros.xhtml">Sesshins (Retiros)</a></li>
            <li><a href="/ViaZen/faces/comoParticipar/doacoes.xhtml">Doações</a></li>
            <li><a href="/ViaZen/faces/comoParticipar/tornarseMembro.xhtml">Tornar-se Membro</a></li>
            <li><a href="/ViaZen/faces/comoParticipar/oficinas.xhtml">Oficinas</a></li>
        </ul>
    </li>
    <li><a href="/ViaZen/faces/vilaZen.xhtml">VILA ZEN</a></li>  
    <li><a href="#">GALERIA DE IMAGENS</a></li>  
    <li><a href="#">MAIS</a>
        <ul>
        <li><a href="/ViaZen/faces/mais/links.xhtml">Links</a></li>
        <!--                                <li><h:link outcome="/mais/links" value="Aconteceu"/></li>-->
        <!--                                <li><h:link outcome="/mais/relatos" value="Relatos de Experiências"/></li>-->
        <!--                                <li><h:link outcome="/mais/links" value="Zen Peacemakers"/></li>-->
        </ul>
    </li> 
</ul>

</div>
</html>
</body>

CSS

#wrapper {
    margin:auto;
    width:960px;    
}

#wrapper h1,h2,h3,h4,h5,h6 {
    color:black;

}

#wrapper ul.menu {
    float:left;
    list-style-type:none;
    margin:50px 0 30px 0;
    padding:0;
}

#wrapper ul.menu a {
    color: #666;
    font: bold 12px Lora, serif;
    text-decoration: none;    
}


#wrapper ul.menu li
    {    
        float: left;
        list-style: none;
        padding:0;
        margin-right:20px;
        position: relative;

    }
#wrapper ul.menu li a
    {    display: block;
         text-decoration: none;
        white-space: nowrap
}

#wrapper ul.menu li a:hover
    {    
    color:#163a24;
    }

#wrapper ul.menu li ul
        {    
            margin: 0;
            padding: 0;
            position: absolute;
            visibility: hidden;
            border-radius:10px;
            background: #fff;
            box-shadow: 1px 1px 15px #888888;
        }


#wrapper ul.menu ul li
        {    
        float: none;
        display: inline;
        text-transform:capitalize;
                           }

#wrapper ul.menu ul li a
        {    
        width: auto;
        border-bottom:1px solid #225A37;
                padding:10px;
                }

       #wrapper ul.menu ul li a:hover {
                color:#2E8052;                    
      }                    

#wrapper ul.menu ul li:last-child a                
        {
        border-bottom:none;        
        }

的jQuery

$(function(){

                $("ul.menu li").hover(function(){

                    $(this).addClass("hover");
                    $('ul:first',this).css('visibility', 'visible');

                }, function(){

                    $(this).removeClass("hover");
                    $('ul:first',this).css('visibility', 'hidden');

                });

                $("ul.dropdown li ul li:has(ul)").find("a:first").append(" &raquo; ");

            })

Answer 1

在我的FF浏览器上看起来并不乱，但通常在发生类似这样的问题时，我将normalize.css与reset.css结合使用，Cross Browser兼容性始终是一个挑战，但规范化尝试覆盖浏览器的默认样式表在所有浏览器上呈现类似的内容。

在Firefox中显示下拉菜单的内容

1 个答案: