间隔Firefox中下拉菜单的内容

Question

I've made a drop down menu with CSS and jQuery using unordered lists. 我使用无序列表使用CSS和jQuery制作了一个下拉菜单。 The problem is in firefox the spacing of the list items is not equal. 问题是在Firefox中，列表项的间距不相等。 It works in Chrome and IE.I've tried using a reset.css but it didn't work also : http://jsfiddle.net/dyUwm/20/ 它可以在Chrome和IE中使用。我曾尝试过使用reset.css，但它也无法正常工作： http : //jsfiddle.net/dyUwm/20/

HTML 的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 的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 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结合使用，跨浏览器兼容性始终是一个挑战，但是normalize尝试覆盖浏览器的默认样式表以在所有浏览器上呈现类似的效果。

间隔Firefox中下拉菜单的内容

问题描述

1 个解决方案

解决方案1
0 2012-12-14 22:31:00

间隔Firefox中下拉菜单的内容

问题描述

1 个解决方案

解决方案1 0 2012-12-14 22:31:00

解决方案1
0 2012-12-14 22:31:00