Rotación y posición: absoluta (IE8 y menor)

Tengo un problema con la rotación en Internet Explorer 8 o inferior. Puedo rotar un div principal, pero el elemento secundario (posicionado como absoluto) no rota con su elemento principal. Cuando no coloco al niño absoluto, hace la rotación correcta.Rotación y posición: absoluta (IE8 y menor)

Aquí está mi código

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

Al ver este código en Internet Explorer 8, entonces este es el resultado

enter image description here

me gustaría que el div verde tiene la misma rotación que la div rojo

Gracias!

Fuente

2011-10-17 Vinzcent

Solo por curiosidad, ¿por qué estás rotando un div? Nunca he encontrado un uso para eso, solo tengo curiosidad por tus motivos. – FreeSnow

Tengo que hacer un sitio que se parece un poco a una presentación prezi :). http://prezi.com/ – Vinzcent

Oh, buena idea. Bueno, buena suerte :) – FreeSnow

Una solución: utilizar una clase para aplicar la rotación a cualquier elemento-absoluta posicionada niño:

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>

Fuente

2011-10-17 12:31:13 achairapart

Esto funciona, pero la posición del niño con el padre no es la misma que cuando no había rotación. – Vinzcent

al agregar un 'z-index' con cualquier valor para el padre debería solucionar el problema. Se encuentra aquí: http://stackoverflow.com/questions/3055383/dximagetransform-matrix-absolutely-position-child-elements-not-rotating-in-ie-8/6268206#6268206 – achairapart

-1

error en IE8.

Esta es una manera simple y eficaz para resolver este:

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

inserto arriba a la cabeza

Fuente

2011-10-17 12:30:49 EtherDream

Rotación y posición: absoluta (IE8 y menor)

Respuesta

Cuestiones relacionadas