Question

我正在wordpress网站上的标题图片上方安装二级菜单，我在Firefox 24.0和Chrome 30.0.1599.101 m，Wordpress 3.6.1中获得了不同的布局。

查看此测试网站以查看页面顶部的差异，其中Firefox“覆盖”顶部菜单上的标题，Chrome推送标题：

如果删除新菜单，页面看起来一样，不足为奇。

我使用Firebug和Chrome工具检查了该页面，但找不到可能正在执行此操作的CSS。

在旁注中，我希望顶部菜单与页面顶部齐平。我在css的任何地方都看不到它会在顶部产生边距或填充，但它从顶部显示大约22px。

感谢。

Answer 1

你有几个问题导致了这个问题。

首先 - 你的菜单有保证金。我在你的style.css中看到你有以下内容：

.header-navigation ul {
    margin-left: 0;
}

只需将其更改为：

.header-navigation ul {
    margin: 0;
}

在你改变之后，你仍然可以将你的标题放在“芝加哥北岸的曲棍球技能训练”上 - 你现在有“行高：1px;”这使得标题自己挤压。

你应该完全删除标题（它可能在你主题的header.php文件中）或者在<div id="header" class="grid-100 clearfix">的开始标记之后移动它，然后在你的style.css中添加它（第485行）： / p>

h1.title {
    color: #000;
    padding: 3px 0 0 5px;
    float: left;
}

这样，标题实际上是可见的，不会弄乱您的菜单。

编辑：

为了让你的导航保持在图像的顶部，我建议你让它绝对。我相信Chrome正在正确渲染导航（我可能也错了）。无论如何，只需将第630行的条目更改为：

.header-navigation {
    list-style-type: none;
    margin: 0;
    padding: 0;
    position: absolute; 
    top: 0;
    right: 10px;
}

这应该确保导航始终位于标题图像的顶部。