Firefox 下拉选项字体大小未呈现答案

【问题标题】：Firefox dropdown option font-size not being renderedFirefox 下拉选项字体大小未呈现
【发布时间】：2017-05-05 18:47:02
【问题描述】：

我需要为<select> 列表中的<option> 增加字体。虽然这在 Chrome 中很容易工作，但在 Firefox 中唯一增加的是选定的选项。我的 Firefox 版本是 50.1.0

参考this fiddle，我得到以下不同的结果：

火狐：

Chrome：

select {
  font-size: 200%;
}

<select>
    <option value="1">One</option>
    <option value="2">Two</option>
</select>

我希望在 Firefox 中也能获得与 Chrome 相同的行为。

【问题讨论】：

在我的 Firefox 中，它看起来就像在 Chrome 中一样......
请检查您的Firefox版本好友。它在我的 Firefox 中运行良好。
需要更多信息！您使用的是什么操作系统？视网膜屏幕与否，放大与否等。
firefox 57.0.1 仍然存在这个问题。
Firefox 73.0.1 仍然存在这个问题。

标签： html css firefox

【解决方案1】：

这是 Firefox 中的一个错误，但仍未修复。

他们说已经解决了，但问题仍然存在。

禁用多进程，它会正常工作。

如何禁用多进程：（来自LINK）：

转到关于：配置。搜索“browser.tabs.remote.autostart”。可能有多个结果。将它们全部设置为 false 并重新启动浏览器。

错误链接：

https://bugzilla.mozilla.org/show_bug.cgi?id=910022

【讨论】：

firefox 65.0.1 (Mac OS) 仍有此问题

【解决方案2】：

在做了一些窥探之后，我发现有些人在新版本的 Firefox 中报告了这个问题。我自己用的是开发版，和你有同样的问题。

这个article 来自 Mozilla 的家伙在这方面非常有趣。

有一个部分介绍了多个浏览器/设备上的选择框样式，但您的选项看起来很薄。

通常 CSS 属性（如 -moz-appearance: none）会有所帮助，但在这种情况下，我看不到解决方法，我已经看到报告说这是新版本 Firefox 中的一个错误，所以手指交叉它很快就消失了。祝你好运！

【讨论】：

是的，我试过-moz-appearance: none但没有成功

【解决方案3】：

更新

我忽略了完全解释我的疯狂背后的方法，只是因为我不能 100% 确定我的解决方案会起作用，因为满月时某些 Mac 上会出现一些鲜为人知的错误（正如你可以告诉我的那样PC 并且嫉妒 Mac 的显卡。）

以为你有一台 Mac，我的错。无论如何，这些解决方案都有效。

在处理字体和继承时，我们可以自然地假设如果我们有一个body {font-size:16px;} 继承将级联到其余元素，就像一个舒适的 16 像素毯子一样。表单元素被忽略，默认情况下不继承字体属性。我们可以通过以下方式解决此问题：

使用 inherit 值，如修复 1 或...
...从修复 2 中的父级继承或...
...直接就像在修复 3 中一样。

此代码段有 3 个修复，希望其中一个对您有用。

片段

html,
body {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  font: 600 16px/1 Verdana;
}
* {
  margin: 0;
  padding: 0;
  line-height: 1;
}
fieldset {
  padding: 10px;
  margin: 50px auto;
}
legend {
  text-align: right;
}
select {
  width: 6ex;
}
/* Fix #1
|~~~~~~~~*/

select#X {
  font-size: 2em;
}
select#X > option {
  font-size: inherit;
}
/* Fix #2
|~~~~~~~~*/

select#Y {
  font-size: 200%;
}
select#Y > option {
  font-size: 100%;
}
/* Fix #3
|~~~~~~~~*/

select#Z {
  font-size: 32px;
}
select#Z > option {
  font-size: 32px;
}

<fieldset>
  <legend>
    <h1>Font-size</h1>
    <h2>Select<br>
    Option</h2>
  </legend>

  <select id='X' name='X'>
    <option value="X">X</option>
    <option value="1">2em</option>
    <option value="2">inherit</option>
  </select>

  <select id='Y' name='Y'>
    <option value="Y">Y</option>
    <option value="1">200%</option>
    <option value="2">100%</option>
  </select>

  <select id='Z' name='Z'>
    <option value="Z">Z</option>
    <option value="1">32px</option>
    <option value="2">32px</option>
  </select>

</fieldset>

【讨论】：

也不是Firefox 64。