Question

我已经全神贯注地了解更多相关信息，并想知道为什么会这样。

以下是代码：

<!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>

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

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

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

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

Answer 1

我解决了它 magicaly 只是将z-index: 1添加到带有矩阵过滤器的父元素。好吧，任何z-index都应该有用。

Answer 2

我认为位置绝对阻止过滤器继承。我最近在尝试使用模糊过滤器时发现了同样的事情，除非在这种情况下我想要一种方法来使过滤器停止继承。我没有意识到IE8在这方面与IE6 / 7不同。

这是你想要的效果吗？

Rotate in IE8 using margin instead of position http://www.boogdesign.com/images/external/rotate.png

<!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="margin-top:10px; margin-left:10px; border:1px solid darkblue;">
            I do not rotate in IE 8.
        </div>
    </div>
</body>
</html>

当然，如果您因特定原因需要将子元素置于绝对位置，则可能运气不佳（可能能够使用浮点数实现某些功能，但它将完全取决于您所需要的内容）。

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

2 个答案: