Unable to rotate: after pseudo-element using CSS in IE8

Question

I have an absolutely positioned field:

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

which has an “arrow” backing away from it, a really absolutely positioned square in: after the pseudo-element. To make it look like an arrow, I want to rotate the square 45 degrees counterclockwise:

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

This works fine except for IE8. To make it spin in IE8, I added a rule:

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

However, this does not work. I checked that -ms-filter works: for example, if I apply this rule to the #box element, #box rotates in IE8. But: after the pseudo-element, the -ms-filter rule is not recognized. Does anyone know if it's possible to turn: after the pseudo-element in IE8, and if so, how?

Answer 1

IE8. --.

IE8 , #box: div. , - IE8?

Answer 2

IE8 ...
:after IE8, a <!DOCTYPE>. ,

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 */

, IE8 IE6/7. , IE.

.

CSS IE

!