dximagetransform.matrix, absolutely position child elements not rotating in IE 8 standards mode
- by davydka
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
