IE：カスタムフォントの文字を含む場合、ドロップダウンオプションは空白です

私のサイトでは<select>をアイコンの中に表示する必要があります。これを達成するために、すべての文字が私のアイコンの1つであるfont awesomeのようなカスタムフォントを作成しました。IE：カスタムフォントの文字を含む場合、ドロップダウンオプションは空白です

はその後、私の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>を満たし：

今

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

、すべてがChromeで正常に動作しますFirefoxの場合は、が予期せず、私はIEにいくつかの問題があります。

クロームでOK：

IE10やIE9と完全に空白：

最終ポイント：IEで

、私は1つをクリックした場合空白のオプションのリストが消えて、se私の<select>の中に正しく選択されたアイコンが表示されるので、問題は<option>でしかないようです。
カスタムjavascriptコンポーネントは使用できません。ネイティブのネイティブ<select>です。

EDIT：

私は元の質問に言うのを忘れていましたが、IE11とが正常に動作します。

Here試してみると、私はブートストラップグリフィスを使いましたが、問題は同じです。

出典

2015-10-09 Marco Mercuri

IEでは、オプションでCSSスタイルをあまり使わないと思います。おそらくあなたのCSSのスタイルルールの最後に '！important'を追加してください。 – TricksfortheWeb

FontAwesomeからの引用：「Adblock Plusは、「ソーシャルメディアボタンを削除する」設定でフォントAwesomeのブランドアイコンを削除できます。我々はハッキングを使用してそれらを強制的に表示しません。これがエラーと思われる場合はAdblock Plusの問題を報告してください。この問題を回避するには、ソーシャルアイコンのクラス名を変更する必要があります。これが、あなたのキャラクターが表示されない理由です。 – TricksfortheWeb

'！important'で試したところ、同じ問題があります。私は私のIEにAdblock Plusを持っていません。確かに私はChromeとFFで持っています。とにかくありがとう –

フォントの宣言が奇妙に見えます。

@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あなたが問題を抱えている：あなたのfont-face宣言から?eengexをドロップしてみてください。 IE10は他の最新のブラウザーと一緒にWOFFを読み込みます。

もう一つの選択肢は、旧式のブラウザで十分にテストされているため、font-awesomeをフォールバックとして使用することです。

出典

2015-10-09 16:30:48 staypuftman

私は結果を試してみました@staypuftman、しかし、フォントで同じ問題がある素晴らしい。 –

あなたのコードはどこかで見ることができますか？ありがとう。 – staypuftman

元の質問を参照してください、私はリンクを追加しました –

注：Internet Explorer 8の以前のバージョンでは、WOFF形式（EOT形式ののみサポート）とする@ font-face規則をサポートしていません。行くとそれを変更する

出典

2015-10-14 16:43:58 Anabeil

私はIE8を気にする必要はありませんが、私はそのバージョンを無視することができますが、私は両方のフォーマットが間違っています。 –

OK、あなたはそれがあなたのWebページのロードとして実行するかを検出するためのコレクションです、あなたは結果を使用して、それに応じた表示を行うことができます 'と'

'タグを'置き換えるようにしてください – Anabeil

私は私のプロジェクトで素晴らしいawesomeを使用します。<head>タグで

私は（私はフォントをダウンロードし、私のcssフォルダ内に挿入された）この私はこれを使用して、私の<body>タグに比べ

<link rel="stylesheet" href="css/font-awesome.min.css">

挿入します。必要に

 <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>

をあなたの素晴らしいフォントを置くときにあなたのウェブサイトにもフォントフォルダを作成してください。

私のために働いています。

出典

2015-10-17 10:04:24 Arcsn

Modernizを必要としています。 –

私は選択する必要はありません。私の答えは、私が採用した解決策を示していた。 – Arcsn

IE：カスタムフォントの文字を含む場合、ドロップダウンオプションは空白です

答えて

関連する問題