在Firefox中以不同方式处理哪些属性会阻止它正确显示

Question

好的，我一直在努力创建一个在Google Chrome上运行良好的下拉菜单。我最近扩展到检查Opera，Firefox＆amp; Safari浏览器。

Safari看起来与Chrome相同，但Opera和Firefox正在显示我的下拉菜单中的“隐藏”文字。 Opera似乎根本没有注册填充，但我的问题是：

问：Firefox中没有显示哪些元素与Chrome和Safari中相同？

我隐藏菜单的方法是将高度设置为0px，然后将鼠标悬停设置为正确的30px。我选择这种方式，因为它可以转换为菜单上下滑动。

HTML：

<nav>
    <ul>
        <li><a href="services.html" class="glow">Services</a>
            <ul>
                <li><a href="researchDevelopment.html" class="glow">Research &amp; Development</a></li>
                <li><a href="designAudit.html" class="glow">Design Auditing</a></li>
                <li><a href="training.html" class="glow">Training</a></li>
                <li><a href="licensing.html" class="glow">Licensing</a></li>
                <li><a href="troubleshooting.html" class="glow">Troubleshooting &amp; Performance Analysis</a></li>
            </ul>
        </li>
        <li><a href="pageTemplate.html" class="glow">Products</a></li>
        <li><a href="pageTemplate.html" class="glow">Training</a></li>
        <li><a href="pageTemplate.html" class="glow">Technology</a></li>
        <li><a href="pageTemplate.html" class="glow">Clients</a></li>
        <li><a href="publications.html" class="glow">Publications</a></li>
        <li><a href="pageTemplate.html" class="glow">Contact Us</a></li>
    </ul>
</nav>

CSS：

/*--- Nav Bar ---*/
nav { float: left; margin: 4px 0 0 137px; }
nav li { list-style: none; float: left; width: 113px; height: 56px; text-align: center; position: relative; }
nav li:hover { background: url(images/buttonSprite.png) 0 -90px; }
nav a { display: block; width: 113px; height: 37px; }
nav a:link { padding-top: 19px; }
/*--- Creates a delayed glowing effect on the links on hover. ---*/
nav a.glow, nav a.glow:hover, nav a.glow:focus { text-shadow: none; -webkit-transition: 300ms linear 0s; -moz-transition: 300ms linear 0s; -o-transition: 300ms linear 0s; transition: 300ms linear 0s;  outline: 0 none; }  
nav a.glow:hover, nav a.glow:focus { color: #fff; text-shadow: -1px 1px 8px #ffc, 1px -1px 8px #fff; }
/*--- Drop Down Functionality. ---*/
nav li ul { list-style: none; height: 0px;}
nav li ul li, nav li ul li a { height: 0px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; tranistion: all 0.2s ease-in-out; }
nav li ul li { float: none; width: 263px; background: url(images/buttonSprite.png) 0 -30px; }
nav li ul a:link { display: block; white-space: nowrap; padding-top: 0px; width: 100%; margin: -10px 0 0 0; }
/*--- Show drop-down on hover. ---*/
nav li:hover ul li { height: 30px; } 
nav li:hover ul a:link { padding-top: 6px; width: 100%; height: 100%; margin: 0 0 0 0; }
nav li ul li:hover{ background: url(images/buttonSprite.png) 0 -60px; }

下拉列表“subMenu”包含在其父列表项中的无序列表中。在玩完代码后，我发现了设置

nav li ul li { display: block }

将导致chrome和Safari也显示文本。作为帮手，这里是我正在谈论的图片。

Chrome：我想要的：

Firefox：没那么多：

菜单向下，适用于我测试过的所有浏览器：

提前致谢。而且，我对这些东西很新，所以如果有格式约定或不必要的代码，请告诉我，以便我可以编写更好的代码。我从Apple.com的styleSheets中获取了CSS格式样式，因为它似乎比

更好

itemReference {
    attribute: setting;
}

式

Answer 1

上一次课程后，我在样式列表中了解到：除了display，position和float之外，不要在LI上添加任何样式，将其全部放在A - 标记为display:block。 99％的问题都将消失。

Answer 2

听起来你在列表项上设置了一个太小的高度，但没有设置overflow:hidden或任何东西。然后你遇到这个WebKit错误：https://bugs.webkit.org/show_bug.cgi?id=33094并在Chrome和Safari中获得不正确的呈现，而其他浏览器则根据规范呈现此内容。