h5bp - 链接不起作用

Question

以下内容对我来说非常奇怪：

我有一个网站，通过使用CSS

定义为更改为“移动版”

@media only screen and (max-width: 45em)

问题是 - 当我缩小文档宽度并低于45 em时，我的链接将不再起作用（它们也不会在Android上）。首先我认为这可能是由于我的JavaScripts，但是已经制作了一个单独的test.html但没有加载任何.js表明它必须是由于其他原因，可能是CSS。

Here's the test page

CSS is here

打开它，你会发现文本中的按钮正常工作。

现在减小浏览器的宽度，直到你的文档宽度低于45em。你会注意到背景是黑色的。我在任何-link周围放置了一个5px绿色边框，以便在窄模式下突出显示它们。

按钮（链接）将无法在任何浏览器中工作，除了IE（所有东西）......？！？！？

我一整天都在搜索，但没有找到错误。有人可以帮忙吗？ 例如，有没有办法在浏览器中调试CSS行为？ 非常感谢。

Answer 1

您有一个宽度设置为#menu-hover-zone的{​​{1}}元素 - 它覆盖了较小屏幕上的按钮。在媒体查询样式表中删除该宽度，您就可以了。