在Firefox 40中，带有optgroups的样式化选择标签看起来不同

Question

如果您在选择标记上使用全局字体系列样式，则版本40中的Firefox如果内部具有optgroup，则会使它们不同。 在旧版本中，外观类似。

我创建了一个fiddle来演示效果。只需在FF40和旧版本中试用此演示。

<style type="text/css">
    select { font-family: Arial,Helvetica,sans-serif; }
</style>

<select>
    <optgroup label="Group1">
        <option value="1">Option 1 Group 1</option>
        <option value="2">Option 2 Group 1</option>
    </optgroup>
    <optgroup label="Group2">
        <option value="3">Option 3 Group 2</option>
        <option value="4">Option 4 Group 2</option>
    </optgroup>
</select>

<select>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
</select>

在使用optgroups进行渲染时，似乎新版本具有不同的字体系列优先级。

这是一个错误吗？或者有人知道解决方法吗？

Answer 1

您是否尝试过使用通配符选择器？

* {
font-family: Arial,Helvetica,sans-serif;
}

Answer 2

Firefox使用：before伪类来设置optgroup标签的样式

optgroup:before {
    content: attr(label);
    font-family: Arial,Helvetica,sans-serif;
    font-style: normal;
}