Ответ 1
В отличие от изменения псевдоэлемента :before при проверке я просто использовал псевдо-элемент :after для активного состояния и щелкнул между непрозрачностью, чтобы скрыть и показать их соответственно.
Спасибо всем, кто помог.
Вход в 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
Ответы
Ответ 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, почему?