设置font-size为inherit时input字号大于p标签的原因及相关问题求解

问题1：为什么input元素的font-size比p元素更大 #

你写的通配符规则* { font-size: inherit; }如果正常生效的话，input和p都会继承body的1.6rem（即16px）字号，计算值完全一致。出现大小差异通常是三个原因：

• 没有加<meta name="viewport" content="width=device-width, initial-scale=1.0">视口标签，移动端Chrome会自动放大字号小于16px的输入框，避免用户点击时页面缩放，哪怕你写的是16px也可能触发这个机制
• 视觉错觉：input默认自带内边距、边框，行高和p元素的默认行高不同，会显得文字更大，你可以去开发者工具的「计算样式」面板查看两个元素的font-size实际计算值，二者应该是相同的
• 通配符规则被其他更高优先级的规则覆盖，检查Styles面板里input元素是否成功匹配到* { font-size: inherit; }这条规则

问题2：为什么在开发者工具中无法读取到input的font-size值 #

你大概率是查看的「Styles」面板，这个面板只会展示你主动通过行内样式、CSS样式表给元素设置的规则。如果要看到最终生效的font-size计算值，需要切换到「Computed（计算样式）」面板，所有元素的最终生效属性都可以在这里查到。

问题3：为什么JS获取document.getElementsByTagName("input")[0].style.fontSize返回空字符串 #

element.style只能读取到写在元素标签style属性里的行内样式，你是通过外部CSS样式表设置的字号，没有写行内样式，自然返回空。如果要获取元素最终生效的字号，用以下代码：

const input = document.querySelector('input')
const computedFontSize = window.getComputedStyle(input).fontSize
console.log(computedFontSize)

内容的提问来源于stack exchange，提问作者lll