dximagetransform.matrix,绝对定位不在IE 8标准模式下旋转的子元素

dav*_*dka 3 transform css-position matrix css3 internet-explorer-8

我已经全神贯注地了解更多关于此的信息,并想知道它为什么会发生.

这是代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
</head>
<body>
    <div style="position:absolute; top:200px; left:200px; height:200px; width:200px; border:1px solid black; filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.9886188373396114, M12=-0.15044199698646263, M21=0.15044199698646263, M22=0.9886188373396114);">
        <div style="position:absolute; top:10px; left:10px; border:1px solid darkblue;">
            I do not rotate in IE 8.
        </div>
    </div>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)

问题是使用MS的dximagetransform.matrix旋转的div中的绝对或相对定位元素不会继承IE 8中的转换.

IE 6和7正确渲染,我可以通过触发兼容模式解决IE8问题,但我宁愿不这样做.有人对这个有经验么?我在其他浏览器上使用css3转换并使用dximagetransform.matrix在IE中实现此效果.

编辑:添加了开始的html标记.问题仍然存在.

http://i45.tinypic.com/nf4gmq.png

小智 21

我解决了它魔法只是添加z-index: 1到矩阵过滤器的父元素.好吧,任何z-index应该工作.