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

Question

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

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

A.填充的固定值

span, button {
  padding: 16px;
}

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

这是codepen。

B.填充的动态值

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来动态计算飞行中每个元素的高度。

Answer 1

让我尝试在这个问题上为您提供支持。

\n\n

这里发生了什么

\n\n

浏览器如何计算行高取决于字体定义和浏览器/操作系统本身。尝试设置 font-family: sans-serif 而不是 Arial 只是为了尝试一下。有关行高的更多信息

\n\n

line-height不适用于span除非您将其显示属性从内联（默认）更改为内联-*或块之类的内容，或者它是另一个格式化上下文（如flexbox）的一部分，否则

\n\n

\n

直接包含内联级内容（例如内联框、原子内联和文本）的块容器元素运行\xe2\x80\x94，建立内联格式化上下文。line-height\n 属性指定\n 元素内行框的最小高度。

\n

\n\n

有关内联布局盒模型的更多信息

\n\n

块级、内联等定义的术语表。

\n\n

旁注：\n还要注意按钮 css 默认值，例如 margin-top、margin-bottom 可以发挥作用，并且按钮默认情况下不会继承字体样式。

\n\n

可能的解决方案

\n\n

我最初的想法是找到 Arial 的值，并在按钮上明确将其设置为行高，以便它与跨度上的默认值相匹配。但显然，即使您知道默认值，也不可能依赖浏览器在多个设备上计算相同的行高。

\n\n

\n
• display: inline-block在跨度上并在两个元素上使用相同的行高。
\n
• 使用弹性盒并利用具有相同高度的元素。
\n

\n