Internet explorer 8 dximagetransform.matrix，绝对定位在IE 8标准模式下不旋转的子元素_Internet Explorer 8_Matrix_Css_Transform_Css Position

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

internet-explorer-8 matrix css

Internet explorer 8 dximagetransform.matrix，绝对定位在IE 8标准模式下不旋转的子元素,internet-explorer-8,matrix,css,transform,css-position,Internet Explorer 8,Matrix,Css,Transform,Css Position,我已经到处寻找更多关于这方面的信息，想知道为什么会发生这种情况代码如下： <!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

我已经到处寻找更多关于这方面的信息，想知道为什么会发生这种情况

代码如下：

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


我在IE 8中不旋转。

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

IE6和IE7渲染正确，我可以通过触发兼容模式来解决IE8问题，但我不想这样做。有没有人有这方面的经验？我在其他浏览器上使用css3转换，并在IE中使用dximagetransform.matrix来实现这种效果

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

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

这就是你想要得到的效果吗

（来源：）


我在IE 8中不旋转。

当然，如果您出于特定原因需要子元素绝对位置，那么您可能会运气不佳（可能可以通过浮点实现某些功能，但这完全取决于您需要什么）。

我神奇地解决了它，我只需使用矩阵过滤器将

z-index:1

添加到父元素中。好的，任何

z-index

都应该有效。

没有必要打开html标记吗？嗨，RobertC，如果是这样，我怎么会看到部分实现？你试过你的建议了吗？当我尝试时，问题仍然存在。事实上，它看起来更糟，因为它现在偏离轴旋转。抱歉，我误解了你的问题。编辑：我已经尝试回答你这次实际提出的问题。你好，罗伯特克，谢谢你的回答。这就是我想要的效果。浮动是一个有趣的想法。强制“兼容模式”也解决了这个问题。这可以通过在标题中放置以下元标记来实现。所以，我想知道的真正问题是：IE8中的这种不同/更新的呈现应该被认为更“正确”，还是应该被认为是一个bug？我想我更喜欢有一种方法“关闭”子元素上的过滤器，并且仍然能够相对于包含的块进行定位，但我不确定它是否与其他浏览器中CSS转换的工作方式兼容。我花了两周时间才找到这个解决方案。我很高兴（看起来像一个装满复活节彩蛋的篮子，甚至像一个装满陷阱的地牢.）-[]完美的解决方案。。。太糟糕了，结果看起来像呕吐物=(

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