css - programacion - programar en html desde cero

Entrada de Internet Explorer: marcado+etiqueta: antes de que no se represente el estilo

Question

Tengo problemas para conseguir que el estilo :checked de mis casillas de verificación personalizadas se muestre en Internet Explorer.

Funcionan perfectamente bien en Chrome.

... pero en IE

Aquí está el estilo relevante

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

También noté que Internet Explorer simplemente elimina el estilo en la carga ...

¡Gracias por cualquier ayuda!

EDITAR: Demo Codepen (Esta demostración tampoco funciona en IE)

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

Answer 1

A diferencia de la modificación de :before pseudo elemento en marcado simplemente utilicé el :after pseudo elemento para el estado activo y cambio entre opacidades para ocultarlas y mostrarlas en consecuencia.

Gracias por todos los que ayudaron.

Answer 2

El problema al que se enfrenta es un conocido IE10 - IE11 error IE10 - IE11 , donde estos dos navegadores tienden a ignorar por completo la declaración de fuente en los pseudo elementos con display: table-cell . Eso significa que las propiedades como font , font-size font-family , color , etc. se verán afectadas.

Para eludir este error , sería suficiente en su caso para:

▶ Use display: table-cell con un elemento real en lugar de un pseudo-elemento, o

▶ Cambiar display: table-cell para display: inline-block o algún otro valor que non-table-cell para su pseudo-elemento.

▶ Declare una propiedad float que tiene un valor distinto de none para que se display: table-cell para display: block .

Aquí hay algunas preguntas que enfrentan un problema con la display: table-cell también que puede ser de alguna ayuda:

▶ IE no colorear: antes como tabla-celda, ¿por qué?

▶ Posicionamiento de div dentro de la pantalla: table-cell en IE 10

▶ Mostrar tabla-celda en pseudo elemento en IE11

Answer 3

Parece un duplicado de En IE11 usando pseudo element :: before y display: table-cell y glyphicons contens no se mostrarán .

En resumen, hay un error en IE10 y 11 donde el estilo de font se ignora para los pseudo-elementos con visualización de table-cell .

Como se mencionó en el supuesto problema duplicado, una solución adecuada sería utilizar algún otro tipo de display para el pseudo elemento junto con los ajustes necesarios en los estilos de width y height .