手机上的按钮动态填充/高度问题

由于某些原因，如果值不是固定的而是动态的，则button与具有相同值的其他元素相比，它们具有额外的“填充”或“高度” 。

我已经在iOS上的Chrome和Safari中亲自验证了该问题，我的一位朋友在Android上的Chrome中验证了该问题。

span, button {
  padding: 16px;
}

button右侧的高度1px更大，但是根据控制台日志，这两个元素在其他方面是相等的，实际上似乎是这样。

这是codepen。

span, button {
  padding: calc(var(--gap) / 2);
}

@media screen and (min-width: 0px) {
  html {
    --gap: calc(10px + (40 - 10) * (100vw - 0px) / (1200 - 0));
  }
}

显然，即使控制台说它们基本相等，并且button右边的span元素也比左边的元素高得多，并且两个元素的值完全相同...

这是codepen。

A和B之间的唯一区别是B不使用固定值。

在iOS和Android上都可以观察到这种奇怪的行为。

设置appearance为none样式之前无效。

一切都能在桌面浏览器上正常运行。

有人知道这是怎么回事吗？

对元素应用line-height: 1.15和margin: 0可以button减少差异。

奇怪的是，控制台声称该span元素仍然1px更宽（和2px更高），即使您将两个元素叠加在一起，它们实际上实际上是完全相同的宽度。

所述的文本span元素1px或2px比在文本下部button元件，这是有意义的，因为span是1px或2px更高。

button {
  ...
  margin: 0;
  line-height: 1.15;
}

这是codepen。

我只会在button高度上增加一两个像素，但不幸的是，我网站上许多元素的高度是由动态font-size和决定的padding。而且，我宁愿不必在后台不断运行一堆JS来动态计算飞行中每个元素的高度。