我使用 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(" » ");
})
最佳答案
它在我的 FF 浏览器上看起来并没有乱七八糟，但通常当出现这样的问题时，我将 normalize.css 与 reset.css 结合使用，跨浏览器兼容性始终是一个挑战，但 normalize 试图覆盖浏览器的在所有浏览器上呈现类似的默认样式表。
关于jquery - 在 Firefox 中分隔下拉菜单的内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13885206/