为何<input type="button">在Chrome与IE中样式继承表现不同？

差异根源：表单控件的默认渲染策略不同 #

不同浏览器对<input type="button">这类原生表单控件的样式处理逻辑存在本质区别：

• Chrome（WebKit/Blink内核）：表单按钮默认采用系统原生控件样式，属于浏览器内置的用户代理样式表，且默认不继承父元素的font-family。这是因为浏览器设计时倾向于让原生按钮保持系统统一的字体风格，避免页面自定义字体破坏控件的原生一致性。
• IE浏览器：早期IE对表单控件的样式隔离规则不同，允许按钮继承父元素的font-family，但会强制保留按钮的默认文字颜色（比如系统自带的按钮文字色调），因此父元素的color: #FFFFFF无法被继承，这是IE对控件样式的特殊保护机制。

统一样式的解决办法 #

如果需要让按钮在所有浏览器中都继承父元素的样式，可以通过CSS强制指定继承规则：

针对目标按钮的精准设置 #

.common, .common input[type="button"] {
    font-family: "ＭＳ Ｐゴシック";
    color: #FFFFFF;
}

通用化的表单控件继承设置 #

input, button, select, textarea {
    font-family: inherit;
    color: inherit;
}

通过上述代码，可强制表单元素继承父元素的字体和颜色样式，消除不同浏览器间的表现差异。

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