相同CSS作用于<a>和<button>展示效果不一致的解决方案问询

方案合理性判断 #

该方案不合理，不符合HTML规范，不推荐使用。
HTML规范明确禁止可交互元素互相嵌套，<a>和<button>都属于可交互元素，嵌套之后会导致无障碍读屏设备识别异常，部分浏览器还可能出现点击事件冲突，出现跳转失败、操作无响应等异常问题，后续迭代新增功能也容易埋下隐形bug。

更优解决方案 #

可以根据业务场景选择以下两种方案，都能彻底解决样式不统一的问题：

• 统一使用<button>标签
  需要跳转的ADD按钮通过JS实现跳转逻辑，两个按钮都是原生button标签，只需写一套CSS样式就能完全统一表现，不需要额外处理兼容问题，示例代码如下：

<table>
  <tr>
    <td class="title"><h1>Product List</h1></td> 
    <td class="add-product-btn">
      <button onclick="window.location.href='目标跳转地址'">ADD</button>
    </td>
    <td class="delete-product-btn">
      <button>MASS DELETE</button>
    </td>
  </tr>   
</table> 

• 统一使用<a>标签
  做删除操作的按钮给a标签加上role="button"无障碍属性，用JS处理删除逻辑即可，同时建议补全键盘触发逻辑，支持回车、空格触发操作，符合无障碍规范，示例代码如下：

<table>
  <tr>
    <td class="title"><h1>Product List</h1></td> 
    <td class="add-product-btn">
      <a href="目标跳转地址" class="common-btn">ADD</a>
    </td>
    <td class="delete-product-btn">
      <a href="javascript:void(0)" role="button" class="common-btn" id="deleteBtn">MASS DELETE</a>
    </td>
  </tr>   
</table> 

<!-- 按需添加JS逻辑 -->
<script>
const deleteBtn = document.getElementById('deleteBtn')
// 点击触发删除逻辑
deleteBtn.addEventListener('click', function() {
  // 此处写删除操作相关代码
})
// 补全键盘触发逻辑
deleteBtn.addEventListener('keydown', function(e) {
  if (e.code === 'Enter' || e.code === 'Space') {
    e.preventDefault()
    // 触发删除逻辑
  }
})
</script>

如果不想改标签结构，也可以写通用的样式重置代码，清空<a>和<button>的所有默认样式后再统一定制样式，不过这种方式需要处理的兼容细节更多，不如统一标签类型的方案省心。

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