个人中心
gpt4 book ai didi

jquery - 在 Firefox 中分隔下拉菜单的内容

转载 作者：行者123 更新时间：2023-11-28 13:28:17 26 4
gpt4 key购买 nike

我使用 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; ");

            })

最佳答案

它在我的 FF 浏览器上看起来并没有乱七八糟，但通常当出现这样的问题时，我将 normalize.css 与 reset.css 结合使用，跨浏览器兼容性始终是一个挑战，但 normalize 试图覆盖浏览器的在所有浏览器上呈现类似的默认样式表。

关于jquery - 在 Firefox 中分隔下拉菜单的内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13885206/

26 4 0
文章推荐： html - 不会显示 Sprite 图像？
文章推荐： javascript - 为什么我在尝试使用 JavaScript substr() 函数时遇到此错误？
文章推荐： swift - 在 SceneKit 中渲染具有半透明纹理的 3D 模型(头发)？
文章推荐： javascript - 如何使用 Javascript 将元素添加到 JSON 对象
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com