为啥 <button> 标签对待 em 的方式与 <div> 不同？
Posted
技术标签:
【中文标题】为啥 <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 【问题描述】：我注意到
【参考方案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 好一些，后者的浏览器支持范围稍差。
【讨论】：
以上是关于为啥 <button> 标签对待 em 的方式与 <div> 不同？的主要内容，如果未能解决你的问题，请参考以下文章
如何使用正则表达式将 asterix * 替换为 html <em> 标签