html - 菜单在 Firefox 中显示不正确

Question

我正在创建的网站显示的首页与它在 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/

Answer 1

定位元素最好避免行高。利润率要有效得多。摆脱行高并尝试使用

margin-top:100px;

在 nav 或 ul 上。

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

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