移动端按钮动态填充/高度问题

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元素仍然比button元素宽1px（高2px），即使如果您叠加这两个元素，它们实际上具有完全相同的宽度。

span元素的文本比button元素中的文本低1px或2px，这是有道理的，因为span元素比button元素高1px或2px。

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

这里是codepen。

我只想将按钮的高度增加一个像素或两个像素，但不幸的是，我的网站上许多元素的高度由动态font-size和padding的组合确定。而我不想经常在后台运行一堆JS来动态计算每个元素的高度。

- oldboy

---

不确定这是否是原因，但在您的CodePen中，您已经使用</span>关闭了按钮。 - Mig

@Mig 谢谢您指出这个问题。然而，问题仍然存在。 - oldboy

没关系，我没有这个问题，所以无法测试，但听起来像是一个不同的默认设置。也许是边框或其他什么东西。你可以尝试将按钮的appearance设置为所有前缀版本的none。如果你这样做，它应该表现得像一个span。还要确保它们都是inline或inline-block，而不是混合使用。这可能不会改变任何东西，但只是为了确保它们表现相同。 - Mig

你尝试过使用 em 和 px 吗？ - jdpy19

@HugoGresse 我已经尝试了所有的样式。似乎都没有解决问题，即使仅使用 line-height: 1.15 这个属性也无法减少差异。 - oldboy

Answer 1

让我尝试为您解决这个问题。

这里发生了什么

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

line-height未应用于span，除非您将其显示属性从默认的inline更改为类似于inline-*或block的其他内容，或者它是另一个格式上下文的一部分，例如flexbox。

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

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

词汇表，包括块级别、内联等定义。

侧面注意事项： 还要注意按钮css默认值，例如margin-top，margin-bottom可能会起到作用，而按钮默认情况下不继承字体样式。

可能的解决方案

我的初始想法是找到Arial的值，并在按钮上显式设置它作为行高，以便与上的默认值匹配。但是，显然无法依赖浏览器在多个设备上计算相同的行高，即使您知道默认值。

• 在上使用"display：inline-block"，并在两个元素上使用相同的行高。
• 使用弹性盒子，并利用具有相同高度的元素。

- webwelten

---

哇，将line-height应用于两个元素，并在span上使用inline-flex以及在button上使用margin: 0使其生效！这是因为默认为“内联”的元素没有应用line-height，因为它们属于另一个上下文环境？你可以添加更多关于此的信息供其他用户参考吗？也许一些文档或其他资料，然后我会选择它作为答案。 - oldboy

Answer 2

行高/像素取决于浏览器和操作系统，因此按钮和span的高度都会有所不同。

尝试下面的代码，它将帮助您获取高度

span，button {display:inline-block; padding:0 15px; height:45px; line-height:45px;}

span {
          margin-right: 5px;
        }
    
        button {
          outline: none;
          border: none;
        }
    
        span, button {
          display:inline-block;  
          padding: 0 15px;
          height:45px;
          line-height:45px;
          font-family: arial;
          font-size: .704265875rem;
          color: #fff;
          border-radius: 5px;
          background: #4d4d4d;
          -webkit-appearance: none; appearance: none;
        }

<span>NEGOTIATE</span><button>NEGOTIATE</button>

- Nikesh Kumar

Answer 3

默认情况下，按钮具有display:inline-block（检查按钮元素时，默认情况下每个元素都有一些默认样式），而span元素具有display:inline。对于内联元素，line-height将不起作用。尝试将span元素转换为inline-block元素。

span{
   display:inline-block;
}

您还可以使用CSS浮动或弹性布局。

有关内联元素的更多信息： 内联元素不会在新行上开始，这意味着如果有足够的空间，它们将在同一行上紧挨着排列。如果您不理解适用于内联元素的不同规则，则CSS可能会使您非常沮丧。例如，内联元素无法设置顶部或底部边距、宽度或高度属性。但是，它们仍然可以使用左右边距和填充来进行样式化。如果您不了解内联元素遵循的具体规则，则肯定会感到头痛。

有关内联元素和块级元素之间更多区别，请阅读以下文章。 https://codeburst.io/block-level-and-inline-elements-the-difference-between-div-and-span-2f8502c1f95b

- Anji

---

将以下与编程有关的内容从英语翻译成中文。请只返回翻译后的文本，不要进行任何解释。 - oldboy