0

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

查看此测试站点以查看页面顶部的差异，其中 Firefox 将顶部菜单“覆盖”在标题上，而 Chrome 将标题向下推：

http://puckpros.edkatzman.com

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

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

附带说明一下，我希望顶部菜单与页面顶部齐平。我在 css 中看不到它会在顶部产生边距或填充的任何地方，但它显示的距离顶部大约 22px。

谢谢。

4

1 回答 1

1

您有几个问题导致了这种情况。

第一件事 - 你的菜单有余量。我在你的 style.css 中看到你有以下内容：

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

只需将其更改为：

.header-navigation ul {
    margin: 0;
}

更改后，您的标题仍然会显示“芝加哥北岸曲棍球技能培训” - 您当前有“line-height: 1px;” 这使得标题本身被挤压。

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

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

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

于 2013-10-28T16:52:21.677 回答