Rotation and position:absolute (IE8 and lower)

问题

I have a problem with the rotation in Internet Explorer 8 and lower. I am able to rotare a parent div, but the child (positioned absolute) doesn't rotate with its parent. When I don't position the child absolute, it does the right rotation.

Here is my code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>


<style>
    .parent
    {
        background-color: #f00;
        position: absolute;
        top: 300px;
        left: 300px;
        width: 500px;
        height: 500px;

        filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476, sizingMethod='auto expand'); //45deg
    }

    .child
    {
        background-color: #0f0;
        position: absolute;
        top: 150px;
        left: 150px;
        width: 300px;
        height: 300px;  
    }


</style>

</head>

<body>

<div class="parent">
    This is the parent
    <div class="child">
        This is the child
    </div>
</div>



</body>
</html>

When you view this code in IE8, then this is the result

I would like that the green div has the same rotation as the red div.

Thanks!

回答1:

A workaround: use a class to apply the rotation to any child-absolute-positioned element:

css:

.rotate {
       filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476, sizingMethod='auto expand'); //45deg
}

html:

<div class="parent rotate">
    This is the parent
    <p class="child rotate">
        This is the child
    </p>
</div>

回答2:

a bug in IE8.

This's a simple and effective way to solve this:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

insert above to head

来源：https://stackoverflow.com/questions/7793415/rotation-and-positionabsolute-ie8-and-lower

标签

html

css

internet-explorer

rotation