Mozilla <optgroup> font "bug"

Mozilla's forms.css specifies the CSS font property for <optgroup> as: font: -moz-list;. The element doesn't inherit the <select> element's font property and instead displays it in the default font. This means that <select> elements with their font-size set to something larger than the default will not be rendered correctly, i.e. too "low".

This behaviour can be circumvented by explicitly setting the font-size property for the <optgroup> element.

<select> with font-size: 110%;

All <option> elements inherit their font size from the <select> element, whose text is shown completely.

<select> with font-size: 110%; AND containing an <optgroup>

Notice how the <select> text is chopped off at the bottom.

<select> with font-size: 110%; AND containing an <optgroup>, but with an <option> before the <optgroup>

Notice how the <select> text is not chopped off, but the <options> apart from the first have the default font.

<select> with font-size: 110%; AND containing an <optgroup> with font: inherit;

Everything is as intended.