菜单在 Firefox 中未正确显示答案

【问题标题】：Menu not showing correctly in Firefox菜单在 Firefox 中未正确显示
【发布时间】：2012-07-09 19:39:23
【问题描述】：

我正在创建的网站在 Chrome 和 Safari 中显示的首页与它在 Chrome 和 Safari 中应该做的完全一样，但是当我在 Firefox 中测试时，菜单显示不正确。
- 所有浏览器都是最新版本，并且在 mac 上。

Here's a screenshot comparing Firefox and Safari, respectively!

这是我用于菜单的 css 代码，请见谅。

nav {
width: 650px;
height: 220px;
margin: 10px auto;
}

nav ul {
list-style: none;
margin: 0 auto;
display: block;
}

nav ul li {
margin: 10px;
display: inline-block;
height: 100px;
line-height: 200px;
}

我尝试了不同的方法，但这会弄乱工作浏览器中的菜单。

根据要求，这是导航栏的 HTML 代码：

<nav>
<ul>
    <li><h2><a href="#cykler.html">Cykler</a></h2></li>
    <li><h2><a href="#service.html">Service</a></h2></li>
    <li><a href="#index.html"><img src="images/logo.png" name="logo" alt="Søgaard Cykler" width="220" height="200"></a></li>
    <li><h2><a href="#info.html">Info</a></h2></li>
    <li><h2><a href="#kontakt.html">Kontakt</a></h2></li>
</ul>
</nav>

这里是 jsfiddle 上功能代码的链接：http://jsfiddle.net/DaCqS/

【问题讨论】：

是否可以看到您的 HTML，或者您是否有一个可查看的 URL？
将html代码添加到问题中
您是否尝试过为
使用浮点数，不确定您是否需要 display:inline-block... 只是在这里猜测，无法使用物理代码。

【解决方案1】：

最好避免定位元素的行高。边距更有效。摆脱 line-height 并尝试使用

margin-top:100px;

在导航或 ul 上。

编辑：现在我看到了您的 HTML...由于大中心徽标在风格上与四个按钮不同，您应该将它们的 CSS 选择器分开。您当前的 CSS 都无法区分这四个按钮和大中心徽标。解决此问题的一种快速简便的方法是添加此样式：

nav ui li h2 {margin-top:100px;}

【讨论】：

保证金规范无济于事，因为它会将整个导航向下移动。我已经在 nav {} 中从顶部指定了导航栏的位置，但我发现从 nav ul li {} 中删除行高并没有改变任何浏览器中的任何内容，所以不需要那个位的代码。 - 现在我没有使用 line-height 来定位我的元素，但问题仍然存在。我已经相应地更新了问题。
您只需要一种方法来定位这四个按钮而不是整个导航。充分利用您已有的 h2！
该代码不会改变任何东西。我已经用 jsfiddle 更新了这个问题（来自原始代码）

<nav> <ul class="top-menu"> <li class="left"><h2><a href="#cykler.html">Cykler</a></h2></li> <li class="left"><h2><a href="#service.html">Service</a></h2></li> <li class="right"><h2><a href="#info.html">Info</a></h2></li> <li class="left"><h2><a href="#kontakt.html">Kontakt</a></h2></li> </ul> </nav>