为什么 <button> 标签对待 em 的方式与 <div> 不同？答案

【问题标题】：Why does the <button> tag treat em differently from how a <div> does?为什么 <button> 标签对待 em 的方式与 <div> 不同？
【发布时间】：2014-08-23 13:00:24
【问题描述】：

我注意到

标签： css font-size em

【解决方案1】：

您的 HTML 按钮似乎没有从 <body> 继承字体大小。我相信许多表单元素的行为都是这样的（至少在某些浏览器中），尽管我没有文档。

我成功添加了：

button {
    font-size:inherit;
}

WORKING EXAMPLE

【讨论】：

太好了，谢谢。因为 chrome 检查器表明它正在继承该字体大小，所以我被这个抛出了。
是的，它很时髦。 A bug report was marked as invalid 因为这是（显然）根据规范。但我找不到任何官方文档的参考。也许其他人可以？...

【解决方案2】：

这里发生的情况是浏览器应用了默认浏览器样式表，导致button 元素使用的字体大小减小。这在规格中没有描述，减少量可能因浏览器而异。您可以看到 input 元素（如 <input type="text"> 默认情况下）发生了同样的事情：字体大小小于周围文本（尽管这可能很难看出是否使用了不同的字体，这是一个常见的默认值） .

浏览器中的开发者工具并不完美。例如，Chrome 确实将button 元素的font-size 显示为继承——但也显示计算的大小更小。解释是浏览器的默认样式表有font: -webkit-small-control 对应button，这才是这里真正重要的设置。关于继承的信息根本不正确。

当您在button 元素上设置font-size: 1em（或等效的font-size: 100%）时，您将覆盖默认设置。这比设置 font-size: inherit 好一些，后者的浏览器支持范围稍差。

【讨论】：