奇怪的CSS行为，看不出是什么占据了空间

Question

我的网站标题是我的菜单。除了我不得不给它一个负余量，我不想这样做，但由于某种原因，hgroup和nav元素之间有一些占用空间。我认为它可能是搜索框的表单元素，但是当我显示时：阻止它没有区别。该网站为here。

另一个奇怪的事情是当我将鼠标悬停在子菜单（例如回收）上时，父元素变为白色。我不能为我的生活找出原因。请参阅下面有关奇怪的悬停行为。

Answer 1

让你的身体背景更长？

Answer 2

<h2 id="site-description"></h2>

如果你使用Firebug / Inspect元素，你会在那里看到它，就在你的h1之后，占用了大量的空间。

#site-description {
color: #7A7A7A;
font-size: 14px;
margin: 0 270px 3.65625em 0;
}

对于导航中的白色悬停，请进行以下更改：

#access ul ul {
background-color:red;
}

Answer 3

是的h2描述是从你的标题和菜单中占用空间，尝试在mainnav.css中拆分你的规则，好像你有：将鼠标悬停在活动组中，这就是你的课程搞乱的原因

这是导致你的css问题的规则

 #access #menu-menu li.current_page_item a, #access #menu-menu li.current_page_item, #access #menu-menu li.current_page_item a:hover, #access #menu-menu li.current_page_item:hover {
    background-color: #FAFAF0;
    box-shadow: none;
    color: #0F0D0C;

Answer 4

我刷新你的网站后，设计发生了变化。至于现在，我所看到的是导航仍然是标题1px。如果您将margin-top从42px缩减为41px，可能会解决该问题。

编辑： 所以在Chrome中，存在1px问题，但在Firefox中，它看起来很好 Safari和Opera中的1px偏移量相同。但同样，在IE8中，它看起来很好。 我认为这个问题是由于hgroup的定义高度而发生的，如果你已经这样做了。

[第一张图片是Chrome的截图，第二张是来自Firefox ]

编辑2： 偏移是由于背景图像的固定高度。除此之外，一切都很好。显然，正如你所看到的那样，两个图像都有变化，在Firefox中没有1px偏移的铬。我个人不喜欢给可能有上述结果的元素赋予一定的高度。 一个好的解决方案是制作一个100％宽度的标题容器和给定的背景图像，而所有标题内容都将放在容器中。这样，无论容器内的内容有多高，背景都将保持原样，导航不会产生偏移。