IE：如果包含我的自定义字体的字符，则下拉选项为空白
Posted
技术标签:
【中文标题】IE：如果包含我的自定义字体的字符，则下拉选项为空白【英文标题】：IE: dropdown options are blank if contain character of my custom font 【发布时间】：2016-01-07 14:12:51 【问题描述】：在我的网站中，我需要显示<select>，里面只有图标。
为此，我创建了一个自定义字体，例如 font awesome，其中每个字符都是我的图标之一。
然后在我的 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 中，我用包含字符的 unicode 表示的选项填充了我的 <select>：
<select class="select-with-icon">
<option value="myValue1"></option>
<option value="myValue2"></option>
<option value="myValue3"></option>
...
</select>
现在，Chrome 和 Firefox 一切正常，但是，出乎意料，我在 IE 上遇到了一些问题。
Chrome 没问题：
IE10 和 IE9 完全空白：
最后几点：
使用 IE，如果我单击其中一个空白选项，列表会消失，并且所选图标会正确显示在我的<select> 中，所以问题似乎只存在于 <option>。
我不能使用自定义 javascript 组件，只能使用原生 <select>。
编辑：
我忘了在最初的问题中说，但是使用 IE11 可以正常工作。
Here一个codepen试试，我用的是bootstrap glyphicons，问题是一样的。
【问题讨论】：
我认为 IE 不允许在选项中使用太多 CSS 样式。也许在你的 CSS 样式规则的末尾添加一个!important。
引自 FontAwesome：Apparently, Adblock Plus can remove Font Awesome brand icons with their "Remove Social Media Buttons" setting. We will not use hacks to force them to display. Please report an issue with Adblock Plus if you believe this to be an error. To work around this, you'll need to modify the social icon class names. 这可能就是你的角色没有出现的原因。
我尝试了!important 并且有同样的问题。我的 IE 上没有 Adblock Plus，实际上我在 Chrome 和 FF 上有。还是谢谢
这是在网站上还是在电脑上？
将您的代码放入 CodePen 以便其他人可以实时查看。试试 IE11 - 我想知道它是否在那里工作。如果是这样，您最好确定错误与 EOT 文件有关。
【参考方案1】：
我在我的项目中使用了很棒的字体。
在<head> 标签中我插入了这个（我用字体下载并插入到我的css文件夹中）
<link rel="stylesheet" href="css/font-awesome.min.css">
比在我的<body> 标签中我使用这个：
<p> Follow us on: </p>
<ul>
<li><a href="#"><i class="fa fa-facebook-official fa-2x"></i></a> </li>
<li><a href="#"><i class="fa fa-twitter-square fa-2x"></i></a> </li>
</ul>
当您放置好字体时，您还需要在您的网站上创建一个字体文件夹。
对我来说它正在工作。
【讨论】：
尝试用<select><option></option></select>替换<ul><li></li></ul>标签。
我不需要选择。我的回答是向您展示我采用的解决方案。【参考方案2】：
注意：Internet Explorer 8 及更早版本，不支持 WOFF 格式的 @font-face 规则（仅支持 EOT格式）。去改变它
【讨论】：
我不关心 IE8，我可以忽略那个版本，但是我有 woff 和 eot 两种格式。 ok ，你需要 Moderniz ，它是一个集合来检测你的网页加载时哪个运行，然后你可以使用结果并根据它进行查看【参考方案3】：您的字体声明看起来很奇怪。尝试从您的 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 作为备用，因为它在旧浏览器中经过了很好的测试。
【讨论】：
我试过@staypuftman没有结果，但是字体真棒也有同样的问题。 你能把你的代码放在某个地方让我看看吗？谢谢。 查看原始问题，我添加了一个链接。 CodePen 只有 HTML，你可以添加所有的资产吗？ 你只需要那个 codepen，我导入了 bootstrap（字体真棒）并将.glyphicon 类提供给我的选择，以给它正确的字体，然后在任何选项中我输入一个字符。这正是我在我的环境中所做的。以上是关于IE：如果包含我的自定义字体的字符，则下拉选项为空白的主要内容，如果未能解决你的问题，请参考以下文章