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

Posted 2023-03-05

【中文标题】什么属性在 Firefox 中被区别对待，阻止它正确显示

【英文标题】：What property is treated differently in Firefox that is preventing it from displaying this properly

【发布时间】：2012-03-06 03:51:58

【问题描述】：

好的，我一直在努力创建一个在 Google 的 Chrome 上运行良好的下拉菜单。我最近扩大到在 Opera、Firefox 和 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：我想要什么：

火狐：没那么多：

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

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

itemReference 
    attribute: setting;

风格

【参考方案1】：

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

【讨论】：

就是这个！谢谢，我应该考虑尝试这样的事情。

【参考方案2】：

我在样式列表中学到的一课：除了display、position 和float，不要在LI 上添加任何样式，将所有样式都放在带有@987654327 的A 标记上@。 99% 的问题都会消失。

【讨论】：

我目前正在努力实施您的建议，需要一段时间才能完成，哈哈。有一件事，我是否也应该避免放 li:hover 而做 a: hover ？避免li的背后有什么解释吗？

将鼠标悬停在 A 上。一旦开始在 A 和 LI 上组合边距、填充和行高，跟踪和调试将成为一场噩梦。为被点击的元素设置样式而不是其容器也更具有语义意义。

看看我的教程：preview.moveable.com/JM/ilovelists

在 li 元素上设置宽度是否犯罪，因为它们是容器？因为我的子菜单比我的父 li 元素更宽，所以如果不手动设置两个宽度，我要么得到一个太宽的父元素，要么让子菜单变薄。

试试这个。您的子菜单 UL 需要绝对的，而不是 LI。您需要默认隐藏子菜单，然后在悬停时显示它。 jsfiddle.net/9P3Ht/1