rote - No se puede rotar: después del pseudo-elemento usando CSS en IE8

hacer que gire una imagen css

Question

Tengo una caja completamente posicionada:

#box {
    display: block;
    position: absolute;
    width: 100px;
    height: 100px;
    z-index: 100;
    top: 50px;
    left: 50px;
    border: 1px solid #000;
}

que tiene una "flecha" saliendo de ella, realmente un cuadrado absolutamente posicionado en un: después del pseudo-elemento. Para que se vea como una flecha, quiero rotar el cuadrado 45 grados en sentido antihorario:

#box:after {
    display: block;
    position: absolute;
    width: 10px;
    height: 10px;
    top: 10px;
    left: -6px;
    right: auto;
    border-top: 1px solid #666;
    border-left: 1px solid #666;
    background-color: #fff;
    content: "";
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

Esto funciona bien, excepto para IE8. Para hacer que gire en IE8, agregué la regla:

#box:after {
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865482, M12=0.7071067811865466, M21=-0.7071067811865466, M22=0.7071067811865482), SizingMethod=''auto expand''";
}

Sin embargo, esto no funciona. Comprobé que el filtro -ms funciona: por ejemplo, si aplico esa regla al elemento #box, el #box rota en IE8. Pero el: después del pseudo-elemento no reconoce la regla -ms-filter. ¿Alguien sabe si es posible rotar un: después del pseudo-elemento en IE8, y si es así, cómo?

Answer 1

Los filtros no funcionan en Pseudoelementos en IE8. No se puede hacer.

Si el soporte IE8 es imprescindible, su mejor opción es hacer #box: después de su propio div. No es la solución más limpia, pero ¿hay algún truco para IE8?

Answer 2

IE8 tiene soporte parcial para Pseudoelementos ... Ver este enlace
:after de trabajar en IE8 , se debe declarar un <!DOCTYPE> . También,

filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod=''auto expand'', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod=''auto expand'', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */

Notará de lo anterior que IE8 tiene una sintaxis diferente a IE6 / 7. Debe proporcionar ambas líneas de código si desea admitir todas las versiones de IE.

He tomado parte de la porción de esta excelente respuesta.

CSS gira la propiedad en IE

¡buena suerte!