IE: выпадающие опции пустые, если содержат характер моего пользовательского шрифта

На моем сайте мне нужно отобразить <select> с помощью только иконки внутри. Для этого я создал собственный шрифт, например 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 с Chrome:

Полностью пустой с IE10 и IE9:

Последние баллы:

с IE, если я нажимаю на одном из пустых опций список исчезает, а левый значок правильно отображается внутри моего <select>, поэтому проблема кажется только с <option>.
Я не могу использовать пользовательские компоненты javascript, только родной <select>.

EDIT:

Я забыл сказать, в оригинале вопрос, но с IE11 работает отлично.

Here код, чтобы попробовать, я использовал бутстрап глификонов, и проблема такая же.

источник

2015-10-09 Marco Mercuri

Я думаю, что IE не позволяет много стилей CSS в настройках. Возможно, добавьте '! Important' в конец правила стиля в вашем CSS. – TricksfortheWeb

Цитата из FontAwesome: 'По-видимому, Adblock Plus может удалить значки значков Font Awesome со своей настройкой« Удалить социальные медиа кнопки ». Мы не будем использовать хаки, чтобы заставить их отображаться. Сообщите об ошибке в Adblock Plus, если вы считаете, что это ошибка. Чтобы обойти это, вам нужно изменить имена классов социальных значков. Возможно, поэтому ваши персонажи не появляются. – TricksfortheWeb

Я пробовал с '! Important' и есть та же проблема. У меня нет Adblock Plus на моем IE, действительно, у меня есть Chrome и FF. Спасибо в любом случае –

Ваше описание шрифта выглядит странно. Попробуйте сбросив ?eengex из вашей font-face декларации:

@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 вместе со всеми другими современными браузерами.

Другой вариант - использовать шрифт-awesome как резерв, так как он хорошо протестирован в старых браузерах.

источник

2015-10-09 16:30:48 staypuftman

Я пробовал без результата @staypuftman, но есть такая же проблема с шрифтом, удивительным. –

Можете ли вы поставить код – staypuftman

Посмотрите на оригинальный вопрос, я добавил ссылку –

Примечание: Internet Explorer 8 и более ранних версий, не поддерживают @ правило шрифта лица с форматом WOFF (только поддержка формата СРВ). go and change it

источник

2015-10-14 16:43:58 Anabeil

Я не забочусь об IE8, я могу игнорировать эту версию, однако у меня есть оба формата woff и eot. –

ок, вам нужно Moderniz Это коллекция для обнаружения, который работает как ваши веб-страницы нагрузок, то вы можете использовать результаты и сделать вид в зависимости от того, что – Anabeil

Я использую шрифт, отличный от моих проектов.

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

вам нужно создайте также папку шрифтов на своем веб-сайте, когда вы разместите свои awsome шрифты.

для меня это работает.

источник

2015-10-17 10:04:24 Arcsn

Попробуйте заменить '

' теги с ''. –

Мне не нужно выбирать. Мой ответ показал вам решение, которое я принял. – Arcsn

IE: выпадающие опции пустые, если содержат характер моего пользовательского шрифта

ответ

Смежные вопросы