dximagetransform.matrix, absolutely position child elements not rotating in IE 8 standards mode
Posted
by davydka
on Stack Overflow
See other posts from Stack Overflow
or by davydka
Published on 2010-06-16T16:42:31Z
Indexed on
2010/06/18
0:33 UTC
Read the original article
Hit count: 542
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.
© Stack Overflow or respective owner
