HTML带文本图标按钮无法下载文件，同功能图标按钮正常？

问题描述 #

我做了两个下载按钮：一个是带文本的图标按钮（用<button>标签），另一个是顶部导航栏里的图标按钮（用<li>标签）。两者逻辑完全一致，但点击带文本的按钮时，图标状态能切换却无法下载文件，hover也不显示文件地址；而顶部的<li>按钮能正常下载。

带文本按钮代码 #

CSS

button {
  cursor: pointer;
  height: 56px;
  width: 214px;
  margin-bottom: 5%;
  border-radius: 4px;
  font-family: sans-serif;
  font-size: 16px;
  line-height: 56px;
  filter: drop-shadow(2px 2px 4px rgb(0 0 0/0.75));
}

.button1 {
  background: none;
  border: none;
  outline: 2px black solid;
  padding-left: 8.2%;
}

.button1 a {
  color: black;
}

.button1 a:hover {
  cursor: pointer;
}

.button1 span {
  position: absolute;
  top: 0px;
  left: 42px;
}

.activeState {
  display: none;
}

.inactiveState {
  position: absolute;
  height: 18px;
  width: 18px;
  top: 8px;
  left: 16px;
}

.button1:active .activeState {
  display: inline-block;
  position: absolute;
  height: 18px;
  width: 18px;
  top: 8px;
  left: 16px;
}

.button1:active .inactiveState {
  display: none;
}

HTML

<button class="button1">
  <a href="files\downloadableFile.pdf" download>
    <img class="inactiveState" src="graphics\downloadFile_inactive.svg">
    <img class="activeState" src="graphics\downloadFile_active.svg">
    <span>    
      Download File
    </span>
  </a>
</button>

顶部导航按钮代码（正常工作） #

CSS

li {
  list-style-type: none;
}

.icon {
  width: 24px;
  height: 24px;
  padding-top: 8px;
  text-align: center;
}

.inactiveState {
  height: 24px;
  width: 24px;
  top: 16px;
  filter: drop-shadow(2px 2px 4px rgb(0 0 0/0.75));
}

.activeState {
  display: none;
  height: 24px;
  width: 24px;
  top: 16px;
  margin-left: 12px;
  filter: drop-shadow(2px 2px 4px rgb(0 0 0/0.75));
}

li:active .inactiveState {
  display: none;
}

li:active .activeState {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

li:hover {
  cursor: pointer;
  background: none;
  outline: 2px black solid;
  border-radius: 4px;
}

HTML

<li class="icon downloadResume">
  <a href="files\downloadableFile.pdf" download>
    <img class="inactiveState" src="icons\downloadFile_inactive.svg">
    <img class="activeState" src="icons\downloadFile_active.svg">
  </a>
</li>

原因分析 #

核心问题是HTML规范不允许在<button>元素内部嵌套<a>元素，这属于无效的DOM结构。浏览器遇到这种情况会自动修正DOM，比如把<a>标签移到<button>外面，或者拦截<a>的点击事件，导致下载功能失效。而<li>元素里嵌套<a>是完全合法的，所以顶部按钮能正常工作。

另外注意：路径里的反斜杠\要改成正斜杠/，虽然部分浏览器能识别，但正斜杠是URL的标准路径分隔符，可避免潜在兼容性问题。

解决方案 #

方案1：把<button>换成<div>或<span> #

保留原有样式，将<button>替换成块级元素，嵌套<a>标签：

/* 修改button选择器为.button1，添加必要的块级属性 */
.button1 {
  cursor: pointer;
  height: 56px;
  width: 214px;
  margin-bottom: 5%;
  border-radius: 4px;
  font-family: sans-serif;
  font-size: 16px;
  line-height: 56px;
  filter: drop-shadow(2px 2px 4px rgb(0 0 0/0.75));
  background: none;
  border: none;
  outline: 2px black solid;
  padding-left: 8.2%;
  display: inline-block; /* 保持按钮的行内块特性 */
  position: relative; /* 让内部绝对定位的元素以它为基准 */
}

.button1 a {
  color: black;
  text-decoration: none;
  display: block; /* 让a标签占满整个按钮区域 */
  height: 100%;
  width: 100%;
}

/* 其他状态样式保持不变 */

<div class="button1">
  <a href="files/downloadableFile.pdf" download>
    <img class="inactiveState" src="graphics/downloadFile_inactive.svg">
    <img class="activeState" src="graphics/downloadFile_active.svg">
    <span>    
      Download File
    </span>
  </a>
</div>

方案2：移除<a>标签，给<button>添加JS下载逻辑 #

直接用<button>触发下载，不需要嵌套<a>：

/* 保留原有button样式，移除a相关样式 */
.button1 {
  cursor: pointer;
  height: 56px;
  width: 214px;
  margin-bottom: 5%;
  border-radius: 4px;
  font-family: sans-serif;
  font-size: 16px;
  line-height: 56px;
  filter: drop-shadow(2px 2px 4px rgb(0 0 0/0.75));
  background: none;
  border: none;
  outline: 2px black solid;
  padding-left: 8.2%;
  position: relative;
}

/* 其他状态样式保持不变 */

<button class="button1" onclick="downloadFile()">
  <img class="inactiveState" src="graphics/downloadFile_inactive.svg">
  <img class="activeState" src="graphics/downloadFile_active.svg">
  <span>    
    Download File
  </span>
</button>

<script>
function downloadFile() {
  const downloadLink = document.createElement('a');
  downloadLink.href = 'files/downloadableFile.pdf';
  downloadLink.download = 'downloadableFile.pdf'; // 指定下载文件名（可选）
  downloadLink.click();
}
</script>

方案3：将<a>标签样式改为按钮样式 #

直接把<a>做成按钮的样子，不需要<button>：

.button-link {
  cursor: pointer;
  height: 56px;
  width: 214px;
  margin-bottom: 5%;
  border-radius: 4px;
  font-family: sans-serif;
  font-size: 16px;
  line-height: 56px;
  filter: drop-shadow(2px 2px 4px rgb(0 0 0/0.75));
  background: none;
  border: none;
  outline: 2px black solid;
  padding-left: 8.2%;
  display: inline-block;
  position: relative;
  color: black;
  text-decoration: none;
}

/* 状态样式调整为针对.button-link */
.button-link .activeState {
  display: none;
}

.button-link .inactiveState {
  position: absolute;
  height: 18px;
  width: 18px;
  top: 8px;
  left: 16px;
}

.button-link:active .activeState {
  display: inline-block;
  position: absolute;
  height: 18px;
  width: 18px;
  top: 8px;
  left: 16px;
}

.button-link:active .inactiveState {
  display: none;
}

.button-link span {
  position: absolute;
  top: 0px;
  left: 42px;
}

<a href="files/downloadableFile.pdf" download class="button-link">
  <img class="inactiveState" src="graphics/downloadFile_inactive.svg">
  <img class="activeState" src="graphics/downloadFile_active.svg">
  <span>    
    Download File
  </span>
</a>

内容的提问来源于stack exchange，提问作者nathan.friedman.designs