h5bp - 链接不起作用

Question

以下内容对我来说很奇怪：

我有一个网站被定义为仅使用 CSS 即可更改为“移动版本”

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

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

Here's the test page

CSS is here

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

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

按钮（链接）在除 IE（所有东西）之外的任何浏览器中都不再起作用...?!?!?

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

Answer 1

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