移动端#logo与#menu-icon按钮a href失效，桌面端功能正常

我帮你排查了代码里的问题，找到几个导致移动端交互失效的核心原因，以及对应的修复方法：

一、问题诊断 #

从你的CSS和不完整的HTML代码来看，主要问题集中在元素的显示属性、定位层级和HTML结构完整性上：

1. #logo作为背景图容器，没有设置可点击的块级显示属性，导致点击区域失效；
2. 移动端header使用绝对定位后，可能被后续元素遮挡，或者z-index层级不足；
3. #menu-icon的显示层级被下拉菜单覆盖，同时缺少明确的块级显示设置。

二、具体修复步骤 #

1. 修复#logo的点击问题 #

首先确保HTML里的#logo是包裹在<a>标签内（如果还没做的话）：

<a href="你的跳转地址" id="logo" aria-label="返回首页"></a>

然后修改CSS，给#logo添加display:block，确保整个背景图区域都能被点击：

#logo {
 margin: -5px 0 -5px 20px;
 padding: 0 10px 0 10px;
 float: left;
 width: 96px;
 height: 96px;
 background: url(img/logohead96x.png) no-repeat center;
 display: block; /* 新增：将行内a标签转为块级，确保全区域可点击 */
}

在移动端媒体查询里补充尺寸设置：

@media screen and (max-width: 768px) {
  #logo {
    margin: -5px 5px -5px 5px;
    background: url(img/logohead64x.png) no-repeat center;
    width: 64px; /* 新增：匹配移动端logo图尺寸 */
    height: 64px; /* 新增：匹配移动端logo图尺寸 */
    display: block; /* 确保继承块级显示 */
  }
}

2. 修复#menu-icon的点击问题 #

同样先确认HTML结构是带href的a标签：

<a href="#" id="menu-icon" aria-label="展开菜单"></a>

然后调整CSS的显示层级和属性：

#menu-icon {
 display: none; /* 修正原代码的hidden为none，符合标准写法 */
 width: 40px;
 height: 40px;
 background: url(img/nav.png) center;
 display: block; /* 新增：转为块级元素，确保点击区域完整 */
 z-index: 2; /* 新增：层级高于下拉菜单，避免被覆盖 */
}

移动端媒体查询里保持层级设置：

@media screen and (max-width: 768px) {
  #menu-icon {
    display: inline-block;
    z-index: 2; /* 保持更高层级，确保点击不被菜单遮挡 */
  }
}

3. 解决绝对定位的遮挡问题 #

给header添加z-index，确保它在所有页面元素的最上层，避免被后续容器遮挡：

header {
 background-color: #1a1a1a;
 width: 100%;
 height: 86px;
 z-index: 10; /* 新增：确保header不会被其他元素覆盖 */
}

三、额外优化建议 #

• 移动端的hover事件体验不佳，后续可以用JavaScript替换CSS的nav:hover ul逻辑，实现点击展开/收起菜单；
• 给空的a标签添加aria-label属性，提升网站的无障碍访问性。

内容的提问来源于stack exchange，提问作者veryslothysloth