什么属性在Firefox中被区别对待，以防止它正确显示

Question

好的，我一直在创建一个在Google Chrome上运行良好的下拉菜单。我最近扩展到检查Opera上的网站，Firefox & Safari。

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

问：哪些元素没有在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; } 

下拉 '子' 包含它的父列表项内的无序列表。与代码玩弄后，我发现，设置

nav li ul li { display: block }

会造成Chrome和Safari揭示文字以及。作为帮手，这里是我正在谈论的照片。

铬：我想要什么：

火狐：与其说：

菜单下，在所有的浏览器工作，我已经测试过：

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

itemReference { 
    attribute: setting; 
} 

风格

Answer 1

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

Answer 2

一次教训，我样式列表时了解到稍微更好：除display，position和float，不把所有样式放在LI上，把它们全部放在A -tag中，display:block。 99％的问题会消失。