Question

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

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

它有一个“箭头”，它真的是一个绝对定位的正方形：在伪元素之后。为了使它看起来像一个箭头，我想逆时针旋转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之后制作自己的div。不是最干净的解决方案，但IE8是否有任何破解？

Answer 2

IE8对Pseudo元素有部分支持...检查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

祝你好运！

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

2 个答案: