小编Mar*_*uri的帖子

在我的网站中,我需要在<select>里面只显示图标.为了实现这一点,我创建了一个自定义字体,如字体真棒,其中每个字符都是我的一个图标.

然后在我的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组件,只是原生的<select>.

编辑:

我忘记在原始问题中说,但IE11工作正常.

这里有一个codepen尝试,我使用bootstrap glyphicons和问题是一样的.