不同的页眉布局Firefox和Chrome在WordPress的标题

Question

我正在安装一个二级菜单上方我的标题图像在WordPress的网站上，我得到不同的布局在Firefox 24.0和Chrome 30.0.1599.101米，WordPress的3.6.1 。

看看这个测试网站上看到的页面，Firefox的“覆盖”在头顶部菜单和Chrome推动头部向下的最顶部的差异：

http://puckpros.edkatzman.com

的页面看起来一样，如果我删除新的菜单，并不奇怪。

我用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行）：

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

这应该确保导航总是在你的头图像的顶部。