Internet Explorer 'Eingabe: Geprüft + Label: vor' Styling wird nicht gerendert

Question

Ich habe Probleme, die :checked Styling für meine benutzerdefinierten Kontrollkästchen in Internet Explorer anzuzeigen.

Sie funktionieren perfekt in Chrome.

... aber in IE

Hier ist der relevante Styling

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

ich auch nicht bemerkt, dass der Internet Explorer nur das Styling auf Last entfernt ..

Danke für jede Hilfe!

EDIT: Codepen Demo (Diese Demo funktioniert auch nicht in IE)

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

Answer 1

Im Gegensatz das :before auf Pseudo-Element zu modifizieren geprüft habe ich einfach das :after Pseudoelement für den aktiven Zustand und flick zwischen Trübungen, um sie entsprechend zu verstecken und zu zeigen.

Danke für jeden, der geholfen hat.

Answer 2

Es sieht aus wie ein Duplikat von In IE11 using pseudo element ::before and display:table-cell and glyphicons contens wont show up.

Kurz gesagt, gibt es eine bug in IE10 and 11, wo die font Stil für Pseudo-Elemente mit table-cell Anzeige ignoriert wird.

Wie in der vermuteten doppelten Ausgabe erwähnt, wird eine entsprechende Korrektur wäre einen anderen display Typen für das Pseudo-Element bei den erforderlichen Anpassungen an Ihre width und height Arten in Verbindung zu verwenden.

Answer 3

Das Problem Sie konfrontiert ist ein bekanntes IE10 - IE11 Bug, wo diese beiden Browser sind in der Regel vollständig mit display: table-cell die Schrifterklärung in Pseudo-Elemente außer Acht lassen. Das bedeutet, dass Eigenschaften wie font, font-size, font-family, color usw. werden alle geschlagen werden.

diese Fehler zu umgehen, wäre es in Ihrem Fall genügen:

▶ Verwenden display: table-cell mit einem tatsächlichen Elemente anstelle einem Pseudoelement oder

▶ ändern display: table-cell zu display: inline-block oder eine andere non-table-cell Wert für dein Pseudo-Element.

▶ Deklarieren Sie eine float Eigenschaft, die einen anderen Wert als none hat, so dass es stellt sich display: table-cell zu display: block.

---

Hier sind einige Fragen, die ein Problem mit display: table-cell als auch gegenüber, die eine Hilfe sein kann:

▶ IE not coloring :before as table-cell, why?

▶ Positioning of div inside display:table-cell in IE 10

▶ Display table-cell on pseudo element in IE11