为何继承的1rem值不符合预期？根元素设10px却显示13.333px

核心原因 #

浏览器对<select>这类表单控件有默认的UA（用户代理）样式，它们不会自动继承父元素的字体大小，而是遵循浏览器预设的字体规则。你设置的.container的font-size:1rem确实对应10px，但<select>的默认样式中，font-size并非inherit，而是浏览器自带的固定值（比如多数浏览器设为medium，或基于系统默认字体计算），所以它会忽略父元素的继承值，用自身默认规则算出13.333px。而当你直接给<select>设置font-size:1rem时，这行样式覆盖了默认UA样式，因此能显示预期的10px。

解决方法 #

给<select>添加font-size: inherit，强制它继承父元素的字体大小，内部的<option>也会跟着继承这个值：

html {
  font-size: 10px;
}

body {
  font-size: 16px;
}

.container {
  font-size: 1rem;
}

select {
  display: block;
  font-size: inherit; /* 新增这行 */
}

验证效果 #

修改后，<select>和<option>都会继承.container的1rem（即10px），计算值会和预期一致。

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