如何实现Chromium中Button与Span的Tailwind Outline样式统一？

问题说明 #

以下代码在Chromium系浏览器中会生成非矩形的outline效果，但Firefox中显示为标准矩形outline，需要实现所有浏览器统一显示矩形outline，同时保留button元素以满足无障碍访问需求：

<span class="outline">
  <button>a</button>
  <span>a</span>
</span>

可行解决方法 #

• 修改外层容器的显示类型：默认span是行内元素，Chromium会根据内部元素排布计算outline形状。将外层span设为inline-block或block后，浏览器会基于容器边界生成矩形outline：

  .outline {
    outline: 2px solid #000; /* 自定义outline样式 */
    display: inline-block;
  }
  

• 用box-shadow替代outline：box-shadow在各浏览器对行内元素的渲染逻辑更统一，能模拟出矩形的outline效果：

  .outline {
    box-shadow: 0 0 0 2px #000; /* 数值对应outline的宽度和颜色 */
  }
  

• 通过伪元素模拟矩形outline：给外层容器设置相对定位，用伪元素生成独立的矩形边框，完全不受内部元素影响：

  .outline {
    position: relative;
    display: inline-block;
  }
  .outline::after {
    content: '';
    position: absolute;
    inset: -2px; /* 控制边框与容器的间距 */
    border: 2px solid #000;
    pointer-events: none; /* 不干扰内部元素的交互 */
  }
  

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