CSS :avant que ne travaillant pas dans IE11

Je suis remplaçant les traditionnels boutons radio avec des icônes de FontAwesome. Tout fonctionne très bien sur Chrome et Firefox, mais IE11 est d'avoir des problèmes - les icônes je suis en remplaçant les boutons de la radio à ne pas s'afficher du tout.

Modifier avec un travail de Violon: https://jsfiddle.net/sow1a04m/

Exemple dans google Chrome:

CSS :avant que ne travaillant pas dans IE11

Exemple dans IE11:

CSS :avant que ne travaillant pas dans IE11

Voici mon code HTML:

<tr>
    <td class="vert-align">Valid Signed and dated delivery ticket in patient's record.</td>
    <td class="text-center vert-align">
        <label>
            <input type="radio" name="radio-group-1" id="radio-group-1-Y" value="Y" />
        </label>
    </td>
    <td class="text-center vert-align">
        <label>
            <input type="radio" name="radio-group-1" id="radio-group-1-N" value="N" />
        </label>
    </td>
    <td class="text-center vert-align">
        <label>
            <input type="radio" name="radio-group-1" id="radio-group-1-NA" value="NA" />
        </label>
    </td>
</tr>

Et voici mon CSS:

#dlg-audit-intake-compliance-checklist input[type=radio] {
    visibility: hidden;
}

#dlg-audit-intake-compliance-checklist input[type=radio]:hover {
    cursor: pointer;
}

#dlg-audit-intake-compliance-checklist input[type=radio]:before {
    visibility: visible;
    font-family: FontAwesome;
    content: "\f10c";
    font-size: 25px;
    text-shadow: 1px 1px 0px #ddd;
    margin-bottom: 10px !important;
}

#dlg-audit-intake-compliance-checklist input[value=Y]:checked:before {
    color: #009C15;
    content: "\f00c";
}

#dlg-audit-intake-compliance-checklist input[value=N]:checked:before {
    color: #AD0000;
    content: "\f00d";
}

#dlg-audit-intake-compliance-checklist input[value=NA]:checked:before {
    color: #F7D200;
    content: "\f05e";
}

Je pense qu'il peut avoir quelque chose à voir avec la visibility paramètres que j'ai appliqué, mais je n'ai pas été en mesure de le comprendre sur mon propre.

Pourriez-vous poster une de travail extrait de code avec la police liées, de sorte que nous avons la question reproduite, comme maintenant, il sera beaucoup de devinettes
Vérifiez également ce post, il pourrait donner un indice: stackoverflow.com/questions/23954877/...
merci!!!! Je viens de mettre à jour mes question avec un violon montrant le problème. L'écoute de la Tripoter dans chrome fonctionne très bien, mais comme vous pouvez le voir dans IE11, les icônes ne le montrent pas. Je vais aussi vérifier que le lien que vous avez posté.
Ahh, le problème est à l'aide de pseudo-élément d'un élément d'entrée, il ne fonctionne pas dans IE, l'utilisation d'une étiquette comme cible à la place ... il en fait ne devrait pas travailler dans google Chrome, soit du pseudo-élément est supposé ne pas fonctionner sur une seule balise éléments
Double Possible de CSS sélecteurs de pseudo ::before et ::after ne sera pas affiché dans FF 44 et IE11

OriginalL'auteur FastTrack | 2016-06-15