dximagetransform.matrix，绝对位置子元素不以IE 8标准模式旋转 [英] dximagetransform.matrix, absolutely position child elements not rotating in IE 8 standards mode
问题描述
我已经查看了更多的信息，并想知道为什么会发生。
以下是代码：
<！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扩展'，M11 = 0.9886188373396114，M12 = -0.15044199698646263，M21 = 0.15044199698646263，M22 = 0.9886188373396114）;
< div style =position：absolute; top：10px; left：10px; border：1px solid darkblue;>
我不在IE 8中旋转。
< / div>
< / div>
< / body>
< / html>问题是，div中的绝对或相对定位的元素已经使用MS的dximagetransform.matrix旋转了。不继承IE 8中的转换。
IE 6& 7渲染正确，我可以通过触发兼容模式解决IE8问题，但我宁愿不这样做。有人有任何经验吗？我在其他浏览器上使用css3 transform，并使用dximagetransform.matrix在IE中实现此效果。
编辑：添加了开始html标签。问题仍然存在。
http：// i45 .tinypic.com / nf4gmq.png
解决方案我认为绝对位置阻止过滤器继承。我发现同样的事情，当我最近实验模糊过滤器，除了在这种情况下，我想要一个方法，使过滤器停止继承。我没有意识到IE8在这方面不同于IE6 / 7。
这是你想获得的效果吗？
在IE8中使用边距而不是位置旋转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扩展'，M11 = 0.9886188373396114，M12 = -0.15044199698646263，M21 = 0.15044199698646263，M22 = 0.9886188373396114）;
< div style =margin-top：10px; margin-left：10px; border：1px solid darkblue;>
我不在IE 8中旋转。
< / div>
< / div>
< / body>
< / html>
当然，如果你需要子元素绝对的位置为一个特定的原因，你可能是运气不好（可能能够实现浮动的东西，但它将取决于你需要什么）。
I've looked all over for more information on this, and would like to know why it happens.
Here's the code:
<!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>
The problem is that absolutely or relatively positioned elements within a div that has been rotated using MS's dximagetransform.matrix do not inherit the transformation in IE 8.
IE 6 & 7 render correctly, and I can solve the IE8 problem by triggering compatibility mode, but I'd rather not do that. Does anyone have any experience with this? I'm using css3 transform on other browsers and using dximagetransform.matrix to achieve this effect in IE.
EDIT: Added the opening html tag. Problem still exists.
http://i45.tinypic.com/nf4gmq.png
解决方案 I think the position absolute stops the filter from inheriting. I found the same thing when I was experimenting with blur filters recently, except in that case I wanted a way to make the filters stop inheriting. I hadn't realised IE8 was different from IE6/7 in this respect.
Is this the effect you're trying to get?
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>
Of course, if you needed the child element absolutely position for a specific reason you may be out of luck (might be able to achieve something with floats, but it would depend exactly what you needed).
这篇关于dximagetransform.matrix，绝对位置子元素不以IE 8标准模式旋转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
![在IE8中使用边距而不是位置旋转http：// www .boogdesign.com / images / external / rotate.png](\"http://www.boogdesign.com/images/external/rotate.png\"){kind=link}
