Chrome：选择字段字体大小和字体系列忽略样式表答案

【问题标题】：Chrome: Select field font-size and font-family ignoring stylesheetsChrome：选择字段字体大小和字体系列忽略样式表
【发布时间】：2014-04-09 13:18:40
【问题描述】：

在 Chrome 中，表单“选择”字段的字体大小和字体系列未按预期遵循 css 规则。

我的样式表声明字体系列应该是“Open Sans”，字体大小应该是 14px。但是，它正在恢复为“Lucida Grande”和 11px。

Chrome 开发者工具的截图总结了这一点 - 国家选择字段是有问题的项目：

以下未能解决问题：

html, body, input, select, textarea, button {
   font-family: 'Open Sans', sans-serif;
   font-size: 13px;
}

有趣的是，它只在我的机器上执行此操作（mac mini mavericks）；在同一浏览器中对其他人（Windows 7/8）进行测试不会产生错误。有没有其他人处理过这个问题？是否需要一些设置来覆盖默认值？

【问题讨论】：

【解决方案1】：

一个接近的解决方案是使用以下方法在 Mac 上将字体大小增加到 13 像素 - 但在 Windows 上这会导致 48 像素：

select {
  font-size: -webkit-xxx-large;
}

或者，以下将重置有关菜单列表外观的所有内容，以从头开始构建（字体大小/系列采用 CSS 规则或继承）：

select {
  -moz-appearance: none;
  -webkit-appearance: none;
}

理想情况下，简单的字体调整不需要重置菜单列表的所有内容...

【讨论】：

【解决方案2】：

每当 CSS 的级联方面发生意外情况时，并且这显然不是开发人员引入的错误，那么很有可能它与 !important 命令有关。有人可能已将!import 应用于 CSS 早期部分的样式。尝试将其应用到您的样式中，看看它是否有效果。

【讨论】：

!important 指令不是这里的问题。我可以在样式表中的任何地方都没有一个 !important 指令来重现相同的问题。事实上，即使将字体系列样式直接应用于元素，我也可以在 Chrome DOM 检查器中重现该问题。无论指示 SELECT 元素使用哪种字体系列，无论如何它总是使用“Lucida Grande”。这绝对看起来像一个错误。