html - 即 : dropdown options are blank if contain character of my custom font

Question

在我的站点中，我需要显示 <select>里面只有图标。 为此，我创建了一个自定义字体，例如 font awesome ，其中每个 Angular 色都是我的偶像之一。

然后在我的 CSS 中放置了这个:

@font-face {
    font-family: 'myIcon';
    src:url('../fonts/myIcon.eot?eengex');
    src:url('../fonts/myIcon.eot?#iefixeengex') format('embedded-opentype'),
        url('../fonts/myIcon.ttf?eengex') format('truetype'),
        url('../fonts/myIcon.woff?eengex') format('woff'),
        url('../fonts/myIcon.svg?eengex#myIcon') format('svg');
    font-weight: normal;
    font-style: normal;
}
.select-with-icon {
    font-family: 'myIcon';
}

在我的 HTML 中，我填写了 <select>带有包含字符的 unicode 表示的选项:

<select class="select-with-icon">
    <option value="myValue1">&#xe606;</option>
    <option value="myValue2">&#xe607;</option>
    <option value="myValue3">&#xe608;</option>
    ...
</select>

现在，在 Chrome 和 Firefox 上一切正常，但是，出乎意料地，我在 IE 上遇到了一些问题。

Chrome 没问题:

IE10 和 IE9 完全空白:

最后一点:

• 使用 IE，如果我单击其中一个空白选项，列表就会消失，并且所选图标会正确显示在我的 <select> 中。所以问题似乎只有<option> .
• 我不能使用自定义 javascript 组件，只能使用 native <select> .

编辑:

我忘了在原来的问题中说，但是在 IE11 上工作正常。

Here一个 codepen 来尝试，我使用了 bootstrap glyphicons，问题是一样的。

Answer 1

您的字体声明看起来很奇怪。尝试从您的 font-face 声明中删除 ?eengex:

@font-face {
    font-family: 'myIcon';
    src:url('../fonts/myIcon.eot');
    src:url('../fonts/myIcon.eot?#iefix') format('embedded-opentype'),
        url('../fonts/myIcon.ttf') format('truetype'),
        url('../fonts/myIcon.woff') format('woff'),
        url('../fonts/myIcon.svg#myIcon') format('svg');
    font-weight: normal;
    font-style: normal;
}

.eot 字体针对您遇到问题的 IE9。 IE10 与所有其他现代浏览器一起读取 WOFF。

另一种选择是使用 font-awesome 作为后备方案，因为它在旧版浏览器中经过了很好的测试。