Optgroup 中断特殊字符答案

【问题标题】：Optgroup breaks special charactersOptgroup 中断特殊字符
【发布时间】：2017-10-02 18:10:31
【问题描述】：

我需要将 Fontawesome 中的图标添加到选择器的选项中。它工作正常，除非我使用 optgroup

<select>
    <optgroup label="group name">
        <option>opt1 &#xf042;</option>
        <option>opt2 &#xf043;</option>
    </optgroup>
    <option>opt3 &#xf042;</option>
    <option>opt4 &#xf043;</option>
</select>

这里是JSfiddle。

有什么想法吗？

【问题讨论】：

我得到一个 rect 标志... Chrome 58/Windows 10
但在 Firefox 中它可以正常工作:)
对我来说，它适用于 IE 11、Chrome 58。在 FF 53 中中断。全部在 Windows 7 上。
我的 IE11/Windows 10 不工作...我猜表单元素再次很难适应更现代的技术 :)
我遇到了类似的问题，但与 CSS 类有关。

标签： google-chrome internet-explorer firefox safari font-awesome

【解决方案1】：

我更新了你的小提琴以使用外部资源。

它会导入一个 javascript 文件和一个 css 文件，并且现在会显示图标。

如果您在 FontAwesome 上注册了一个帐户，他们会向您发送一个链接。在你的代码中尝试下面的代码，看看它是否有效，我敢打赌它会。

<link rel="stylesheet" type="text/css" href="https://fontawesome.io/assets/font-awesome/css/font-awesome.css">
<script type="text/javascript" src="https://use.fontawesome.com/cec949909c.js"></script>

【讨论】：

【解决方案2】：

Fiddle 在 Windows 8.1（最新的 FF + IE11）上不起作用，看起来操作系统中的选择有问题。即使没有 optgroup 它仍然不起作用，因此 optgroupt 与它无关。

看起来this answer 仍然有效。解决方法：改用 jQuery 插件。

【讨论】：