html - 包装器 float 影响 A 标签悬停区域

Question

我确信这很简单，但我只是没有看到它。 我的包装器 DIV 向左浮动，其中的 A 标签显示正确，但将鼠标悬停在它们上面时，您会发现它们的高度/宽度不正确。

我似乎无法让他们排队，有人可以快速看一下并告诉我我错过了什么吗？

Page is here, it's the social media icons

非常感谢任何帮助，我再次确信这很简单。

--编辑--

我在 Mac 上，到目前为止用 firefox 和 safari 进行了测试，它们没有正确悬停，只有最底部的部分实际上用作按钮。

在 firebug 中，如果我删除 wrappers float 属性，链接就会悬停。所以我知道它与 float 有关。

Answer 1

在 Chrome 上，图标排成一行，但正如您所说，只有图标的底部是事件的。问题是您的#branding 元素向下延伸到#main 的底部以下，部分遮挡了#subWrapper、#sub、#left 和#right 的一部分(尽管不足以在那里引起问题)。

您可以将 overflow: hidden 放在#main 上，但#branding 中的图形会在底部被截断。 (图形看起来非常漂亮，顺便说一句。)我认为如果您只是向 #sub 或 #subWrapper 添加一个正的 z-index，例如 z-index: 1，那应该可以解决问题。