Вход в Internet Explorer: отмечен + ярлык: перед стилей не отображается

У меня возникли проблемы с созданием стиля :checked для моих пользовательских флажков для отображения в Internet Explorer.

Они отлично работают в Chrome.

... но в IE

Здесь соответствующий стиль

input[type="radio"], input[type="checkbox"] {
    opacity: 1;
    position: absolute;
    top: -9999;

    & + label {
        vertical-align: middle;
    }
}

input[type="radio"] + label:before,
input[type="checkbox"] + label:before {
    content: '\f3fd';
    font-family: 'Ionicons';
    width: 26px;
    height: 20px;
    border: 2px solid #45555F;
    font-size: 24px;
    color: transparent;
    display: table-cell;
    text-align: center;
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    padding: 0 2px;
}

input[type="radio"]:checked + label:before,
input[type="checkbox"]:checked + label:before {
    content: '\f383';
    font-family: 'Ionicons';
    font-size: 24px;
    width: 26px;
    height: 20px;
    text-align: center;
    display: table-cell;
    padding: 0 2px;
    border: 2px solid #45555F;
    color: #8ec549;
}

input[type="radio"] + label:before {
    border-radius: 50% !important;
}

Я также заметил, что Internet Explorer просто удаляет стиль при загрузке...

Спасибо за любую помощь!

EDIT: Codepen Demo (эта демонстрация также не работает в IE)

http://codepen.io/anon/pen/rLJqyK

Ответ 1

В отличие от изменения псевдоэлемента :before при проверке я просто использовал псевдо-элемент :after для активного состояния и щелкнул между непрозрачностью, чтобы скрыть и показать их соответственно.

Спасибо всем, кто помог.

Ответ 2

Он похож на дубликат В IE11 с использованием псевдоэлемента:: before и display: table-cell и glyphicons contens не отображаются.

Короче говоря, есть ошибка в IE10 и 11, где стиль font игнорируется для псевдоэлементов с отображением table-cell.

Как упоминалось в предполагаемой дублированной проблеме, подходящим решением было бы использовать некоторый другой тип display для псевдоэлемента в сочетании с любыми необходимыми корректировками в стилях width и height.

Ответ 3

Проблема, с которой вы сталкиваетесь, представляет собой известную ошибку IE10 - IE11, где эти два браузера имеют тенденцию полностью игнорировать объявление шрифта в псевдоэлементах с помощью display: table-cell. Это означает, что свойства font, font-size, font-family, color и т.д. все будут поражены.

Чтобы обойти эту ошибку, в вашем случае было бы достаточно:

▶ Используйте display: table-cell с помощью фактического элемента вместо псевдоэлемента или

▶ Измените display: table-cell на display: inline-block или другое значение non-table-cell для вашего псевдоэлемента.

▶ Объявить свойство float, которое имеет значение, отличное от none, чтобы оно превратило display: table-cell в display: block.

Вот некоторые вопросы, которые могут возникнуть с проблемой display: table-cell, которая может быть полезной:

▶ IE не окрашивается: раньше как table-cell, почему?

▶ Позиционирование дисплея div внутри: table-cell в IE 10

▶ Показать таблицу-ячейку в псевдоэлементе в IE11