<font> tag within <select> not rendering correctly in Firefox

I have been expirementing with the Google Translate tools (http://translate.google.com/translate_tools). They seem to work fine, except it seems that everything that gets translated is wrapped in two <font> tags. When this is within a <select>, Firefox does not render the selected item within the list.

I assume that the <font> tag is not开发者_如何学编程 allowed within an <option> tag, as when starting off with the following markup, the <font> is not shown within firebug:

<select>
    <option selected="selected"><font><font>Test</font></font></option>
    <option><font><font>Test 2</font></font></option>
    <option><font><font>Test 3</font></font></option>
    <option><font><font>Test 4</font></font></option>
</select>

If I add some jQuery to add the <font> tags on DOM load, then the <font> tags appear but the text within disappears. Looking within firebug, it's almost as if they are positioned wrong.

A JS fiddle. Seems like IE, Chrome and Opera all ignore the <font> tag regardless of whether it is injected via jQuery.

If you check the HTML5 spec on the option element:

Content model: Text.

"Text" is defined as:

Text, in the context of content models, means text nodes. Text is sometimes used as a content model on its own, but is also phrasing content, and can be inter-element whitespace (if the text nodes are empty or contain just space characters).

So, due to font being an invalid child of option, browsers are error correcting by removing font.