如何设置<button>的样式，使其看起来像<span>而不降低渲染速度？

Question

出于可访问性的原因，我正在考虑将<span>替换为<button>。我希望元素像现在一样呈现。 CSS看起来类似于以下代码。 （如果发现缺少内容，请添加到其中。）

button {
    background: none;
    border: 0;
    color: inherit;
    font: inherit;
    line-height: normal;
    overflow: visible;
    padding: 0;
}

由于我的应用程序中有很多这样的跨度（可能有数千个），所以我想知道这是否会减慢渲染速度（在Chrome或更新的Firefox中）？

请告诉我它减慢渲染速度或不减慢渲染速度的原因。

---

编辑：我收到一条评论，可能很难理解我为什么这样做。这是一个很好的评论！

原因是，如果我使用<button>而不是<span>，则不必为元素添加键盘处理程序并使元素可聚焦。在大多数情况下，它是由浏览器针对<button>自动完成的。 （这是可访问性所必需的。）

Answer 1

  

由于我的应用程序中有很多这样的跨度（想想成千上万个），我想知道这是否会减慢渲染速度（在更新的Firefox中使用Chrome）？

不，它不会减慢渲染速度。浏览器确实在内部使用CSS定义。

  

出于可访问性原因

WCAG指南Non-text Contrast提供了有关输入控件和相邻文本之间颜色对比度的有趣信息，在删除所有边界时，您应该注意这些颜色。