button下嵌套a标签导致火狐浏览器无法下载

背景

最近项目碰到一个兼容问题，在Chrome下正常下载的模板火狐下载不了

解决

错误写法

<button class="btn btn-primary btn-sm" type="button">
 <span><a href="./add_service_v1.xlsx">下载模板</a></span>
</button>

正确写法

<a class="btn btn-primary btn-sm" href="./add_service_v1.xlsx">下载</a>

总结，这里button下面嵌套的a标签在火狐与ie浏览器会被button覆盖导致，不要使用button嵌套在a标签外，可以通过使用css模拟button样式来实现