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;

导航或ul上的

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

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

Answer 2

好的，所以我浮动了<li>并使用了边距顶部：100px用于h2。

试试这个并告诉我是否修复了它http://jsfiddle.net/hfxKW/

Answer 3

这对你有用吗？ http://jsfiddle.net/WWkWw/

.top-menu{
    background-image:url('foo/logo.png');
    height:22px;
}
.left{
    float:left;
}
.right{
    float:right;
}
.top-menu li{
    margin:60px 10px 10px 10px;
    height:100px;
}

HTML：

<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>

菜单在Firefox中无法正确显示

3 个答案: