dximagetransform.matrix, absolutely position child elements not rotating in IE 8 standards mode

问题

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

回答1:

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?

_{(source: boogdesign.com)}

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

回答2:

I solved it magicaly just adding z-index: 1 to parent element with matrix filter. Well, any z-index should work.

来源：https://stackoverflow.com/questions/3055383/dximagetransform-matrix-absolutely-position-child-elements-not-rotating-in-ie-8

标签

internet-explorer-8

matrix

css3

transform

css-position