导航链接悬停/点击无响应求助：是padding还是Chrome问题？

导航链接出现交互异常：鼠标悬停或点击导航链接时，链接无法被选中，仅显示文本光标；只有将鼠标移动一段距离后才恢复正常。请问这是padding设置问题，还是Chrome浏览器的问题？

相关代码 #

HTML代码 #

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- icons -->
  <link rel="stylesheet" href="https://unpkg.com/boxicons@latest/css/boxicons.min.css">

  <!-- own css  -->
  <link rel="stylesheet" href="{% static '/css/home/style.css' %}">

  <!-- google fonts  -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Abyssinica+SIL&family=Montserrat:wght@500&display=swap" rel="stylesheet">
  <title>Document</title>
</head>
<body>

  <header>
    <a href="#" class="logo">TakeAway</a>
    <div class="bx bx-menu" id="menu-bar"></div>
    <ul class="navbar">
      <li><a href="#"></a>Home</li>
      <li><a href="#"></a>Home</li>
      <li><a href="#"></a>Home</li>
      <li><a href="#"></a>Home</li>
    </ul>
  </header>
  
</body>

CSS代码 #

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Abyssinica SIL', serif;
  scroll-behavior: smooth;
  list-style: none;
  text-decoration: none;
}

:root{
  --main-color:rgb(243, 176, 88);
  --text-color:#fff;
  --bg-color:#ff4b24;
  --big-font:5rem;
  --h2-font:2.25rem;
  --p-font:0.9rem;
}
*::selection{
  background:var(--main-color);
  color: rgb(0, 0, 0);
}

body{
  color: var(--text-color);
  background: var(--bg-color);
}

header{
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30px 150px; 
  background: var(--bg-color);
}

.logo{
  color: var(--main-color);
  font-weight: 600;
  font-size: 2.4rem;
}

.navbar{
  display: flex;
}

.navbar a{
  color: var(--text-color);
  font-size: 1.1rem;
  padding: 10px 20px;
  font-weight: 500;
}

.navbar a:hover{
  color: var(--main-color);
  transition: 0.4s;
}

这既不是padding设置问题，也不是Chrome浏览器的问题，核心原因是HTML标签嵌套错误：

• <li>标签里的Home文本被放在了<a>标签外部，导致<a>标签为空，没有包含可点击的文本内容。
• 当点击或悬停Home文本时，触发的是<li>元素的文本选择行为，而非<a>标签的交互；只有鼠标移动到空<a>标签的padding区域时，才会触发链接的交互效果，这就是出现异常的原因。

修正方法 #

将Home文本移入<a>标签内部，修正后的代码片段如下：

<ul class="navbar">
  <li><a href="#">Home</a></li>
  <li><a href="#">Home</a></li>
  <li><a href="#">Home</a></li>
  <li><a href="#">Home</a></li>
</ul>

修正后，Home文本被<a>标签包裹，点击或悬停文本时就能正常触发链接交互，CSS设置的padding也会覆盖整个可点击区域，恢复预期的交互效果。

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