Input di Internet Explorer: selezionato + etichetta: prima dello styling non eseguito

Question

Sto riscontrando qualche problema nello stile :checked per le mie caselle di controllo personalizzate da visualizzare in Internet Explorer.

Funzionano perfettamente bene in Chrome.

... ma in IE

Ecco lo styling relativo

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

ho fatto anche notare che Internet Explorer semplicemente rimuove il disegnare sul carico ..

Grazie per qualsiasi aiuto!

EDIT: Codepen Dimostrazione (Questa demo non funziona in IE entrambi)

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

Answer 1

invece di modificare lo pseudo elemento :before sulla controllato ho usato semplicemente lo pseudo elemento :after per lo stato attivo e flick tra le opacità da nascondere e mostrarle di conseguenza.

Grazie per tutti coloro che hanno aiutato.

Answer 2

Sembra un duplicato di In IE11 using pseudo element ::before and display:table-cell and glyphicons contens wont show up.

In breve, c'è uno bug in IE10 and 11 in cui lo stile font viene ignorato per gli pseudo elementi con la visualizzazione table-cell.

Come accennato nel numero duplicato presunta, una correzione adeguata sarebbe quella di usare qualche altro display tipo per l'elemento pseudo in combinazione con le modifiche necessarie ai vostri width e height stili.

Answer 3

Il problema riscontrato è un noto IE10 - IE11 bug, dove queste due browser tendono a ignorare completamente la dichiarazione di carattere in elementi pseudo con display: table-cell. Ciò significa che le proprietà come font, font-size, font-family, color ecc saranno tutti colpiti.

Per aggirare questo bug, sarebbe sufficiente nel tuo caso per:

▶ Usa display: table-cell con un elemento reale invece di una pseudo-elemento, o

▶ Change display: table-cell a display: inline-block o altro non-table-cell valore per il tuo pseudo-elemento.

▶ dichiarare una proprietà float che ha un valore diverso da none in modo che si trasforma display: table-cell a display: block.

---

Ecco alcune domande che devono affrontare un problema con display: table-cell così che potrebbe essere di alcun aiuto:

▶ 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