0

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

这是分别比较 Firefox 和 Safari 的屏幕截图！

这是我用于菜单的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/

4

3 回答 3

0

这对你有用吗？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>
于 2012-07-09T11:39:23.867 回答
0

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

margin-top:100px;

在导航或 ul 上。

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

nav ui li h2 {margin-top:100px;}
于 2012-07-09T10:30:26.417 回答
0

好的，所以我浮动了<li>并使用了 margin-top:100px 作为 h2。

试试这个，让我知道是否可以解决它http://jsfiddle.net/hfxKW/

于 2012-07-09T11:35:36.887 回答