Html 在Firefox中，哪些属性被区别对待，从而阻止它正确显示此属性

好的，我一直在努力创建一个下拉菜单，它在谷歌的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>

下拉菜单“子菜单”作为无序列表包含在其父列表项中。在玩弄代码之后，我找到了那个设置

nav li ul li{display:block}

也会导致chrome和Safari显示文本。作为一个助手，这里是我所说的图片

Chrome：我想要的是：

Firefox：没有那么多：

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

提前谢谢。而且，我对这些东西还很陌生，所以如果有格式约定或不必要的代码，请让我知道，这样我可以编写更好的代码。我从Apple.com的样式表中选择了CSS格式样式，因为它看起来比

itemReference {
    attribute: setting;
}

---

样式

我在设置样式列表时学到的一课：除了

显示

、

位置

和

浮动

，不要在

LI

上设置任何样式，将所有样式都放在

A

-标记上，带有

显示：块

。99%的问题都会解决。

一旦我在设置样式列表时学到了一课：除了

显示

、

位置

和

浮动

，不要在

LI

上设置任何样式，用

display:block

将其全部放在

A

-标签上。99%的问题都会消失。

听起来你在列表项上设置的高度太小，但没有设置溢出：隐藏或任何东西。然后，您会遇到此WebKit错误：当其他浏览器按照规范呈现此错误时，Chrome和Safari中的呈现不正确。

听起来您在列表项上设置的高度太小，但没有设置

溢出：隐藏

或其他任何设置。然后你会遇到这个WebKit错误：当其他浏览器按照规范渲染时，Chrome和Safari中的渲染不正确。

我目前正在实施你的建议，需要一段时间才能解决，哈哈。有一件事，我是否应该避免使用li:hover，而改为使用a:hover？？避免使用li有什么解释吗？将鼠标悬停在A上。一旦开始在A和li上组合边距、填充和线条高度，跟踪和调试就会变成一场噩梦。设置被单击元素的样式（而不是其容器）在语义上更有意义。请看一看我的教程：preview.moveable.com/JM/ilovelist设置li元素的宽度是否违法，因为它们是容器？因为我的子菜单比我的父li元素宽，所以没有手动设置两个宽度，我要么得到一个太宽的父元素，要么得到一个太薄的子菜单。试试看。您的子菜单UL需要绝对的，而不是LI。默认情况下，您需要隐藏子菜单，然后在悬停时显示它。我现在正在实施你的建议，需要一段时间才能把它全部解决，哈哈。有一件事，我是否应该避免使用li:hover，而改为使用a:hover？？避免使用li有什么解释吗？将鼠标悬停在A上。一旦开始在A和li上组合边距、填充和线条高度，跟踪和调试就会变成一场噩梦。设置被单击元素的样式（而不是其容器）在语义上更有意义。请看一看我的教程：preview.moveable.com/JM/ilovelist设置li元素的宽度是否违法，因为它们是容器？因为我的子菜单比我的父li元素宽，所以没有手动设置两个宽度，我要么得到一个太宽的父元素，要么得到一个太薄的子菜单。试试看。您的子菜单UL需要绝对的，而不是LI。默认情况下，您需要隐藏子菜单，然后在悬停时显示它。就是那个！谢谢你，我应该想试试那样的东西。就是那个！谢谢你，我应该想试试那样的东西。

itemReference {
    attribute: setting;
}