无法旋转：在 IE8 中使用 CSS 伪元素后

Question

我有一个绝对定位的盒子：

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

它有一个“箭头”，实际上是一个绝对定位的正方形，位于 :after 伪元素中。为了让它看起来像一个箭头，我想将正方形逆时针旋转 45 度：

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

这工作正常，除了 IE8。为了让它在 IE8 中旋转，我添加了规则：

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

但是，这不起作用。我已经验证了 -ms-filter 是否有效：例如，如果我将该规则应用于#box 元素，#box 会在 IE8 中旋转。但是 :after 伪元素无法识别 -ms-filter 规则。有人知道是否可以在 IE8 中旋转 :after 伪元素，如果可以，怎么做？

Answer 1

过滤器不适用于 IE8 中的伪元素。没办法。

如果 IE8 支持是必须的，你最好的办法是制作 #box:after 它自己的 div。不是最干净的解决方案，但 IE8 是否有任何 hack？

Answer 2

IE8 部分支持伪元素...检查此Link
:after 要在 IE8 中工作，必须声明 <!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 rotate property in IE

祝你好运！