Spacing the contents of a dropdown menu in Firefox

Question

I've made a drop down menu with CSS and jQuery using unordered lists. The problem is in firefox the spacing of the list items is not equal. It works in Chrome and IE.I've tried using a reset.css but it didn't work also : 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结合使用，跨浏览器兼容性始终是一个挑战，但是normalize尝试覆盖浏览器的默认样式表以在所有浏览器上呈现类似的效果。

Spacing the contents of a dropdown menu in Firefox

Question

1 answers

solution1
0 2012-12-14 22:31:00

Spacing the contents of a dropdown menu in Firefox

Question

1 answers

solution1 0 2012-12-14 22:31:00

solution1
0 2012-12-14 22:31:00