Rotación CSS & IE: el posicionamiento absoluto parece romper IE

Estoy tratando de rotar una variedad de bloques de texto para que estén orientados verticalmente, y colocarlos en ubicaciones muy específicas en un diagrama que se previsualizará y luego se imprimirá. CSS gira el texto muy bien en IE, FF, incluso Opera.Rotación CSS & IE: el posicionamiento absoluto parece romper IE

Pero cuando intento posicionar un elemento girado, IE 7 & 8 (sin preocuparse por 6) se rompe por completo y el elemento permanece en su ubicación original. De cualquier forma alrededor de esto? Realmente necesito el control de píxel de dónde se encuentran estas etiquetas.

HTML

<div class="content rotate"> 
    <div id="Div1" class="txtblock">Ardvark Avacado<br />Awkward</div> 
    <div id="Div2" class="txtblock">Brownies<br />Bacteria Brussel Sprouts</div> 
    </div>

CSS

div.content { 
    position: relative; 
    width: 300px; 
    height: 300px; 
    margin: 30px; 
    border-top: black 4px solid; 
    border-right: blue 4px solid; 
    border-bottom: black 4px dashed; 
    border-left: blue 4px dashed; } 

.rotate { 
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 
    -o-transform: rotate(-90deg); 
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); } 

.txtblock { 
    width: auto; 
    position: absolute; 
    } 

#Div1 { 
    left:44px; 
    top:70px; 
    border:red 3px solid; } 

#Div2 { 
    left:13px; 
    top:170px; 
    border:purple 3px solid; }

Fuente

2010-04-13 doub1ejack

¿Alguna posibilidad de que pueda proporcionar un enlace en vivo? –

Esto suena como un problema que pasé una gran cantidad de tiempo. Dejé dos comentarios en el blog post de Paul Irish detallando mis hallazgos. Aquí está lo que escribí:

IE6 y 7: Debe declarar altura o anchura de al menos en el div que es va a girar antes de que su filtros de rotación aparecen en el CSS. Incluso si hace esto, no se aplicará ninguno de los estilos aplicados a ese div DESPUÉS de que los filtros de rotación aparezcan en el código no se aplicarán. Lo mismo parece ser verdadero para cualquier estilo aplicado a los hijos de div también. Extraño.

IE8: Esto no parece ser un problema. I se aplicaron correctamente estilos en el div (incluida la declaración de su altura o ancho por primera vez) después de que los filtros de rotación aparezcan en el código.

... y más rarezas rotación CSS para informar:

En IE6 y 7, incluso si usted sigue las reglas he publicado algunos comentarios hacia atrás, usted todavía romper totalmente su sitio si usa más de un filtro de rotación por archivo CSS externo. Usted tiene que tener archivos CSS separados por filtro de rotación, o simplemente agrega cada filtro anidado en sus propias etiquetas únicas de estilo en el encabezado de su html. De lo contrario, solo se mostrará el primer objeto girado , pero incluso este estará borroso y en el ángulo incorrecto.

Hilarantemente, la eliminación de la DOCTYPE hace que toda la rotación para rendir a la perfección, así que estoy asumiendo peculiaridades modo sabe cómo manejar múltiples filtros de rotación ? Además, con una hoja de estilo compleja más grande, más , incluso había efectos secundarios más extraños, pero no pude determinar qué estaba causando eso. De todas formas ...

llevar el mensaje a casa:

Use sólo 1 ms filtro patentado: (cuando se utiliza para la rotación, al menos) por estilo externa. y .. Cada filtro de rotación en su html debe ser en su propio conjunto de etiquetas de estilo.

Aunque mi problema fue levemente diferente, es posible que se encuentre en una situación similar con los dos divisores internos girados por el elemento primario. Vale la pena un tiro. Al menos intente mover la declaración .rotate al final de la hoja de estilo.

Fuente

2010-11-04 04:18:18 Masondesu

Me parece que esto funciona si pones las rotaciones de los txtblocks, en lugar de en el recipiente exterior.

Demo

Fuente

2010-04-13 15:18:10 graphicdivine

Intenté esto también. Los elementos giran, pero no se muestran de forma consistente entre IE y FF. Estaba girando el contenedor para tratar de obtener un posicionamiento uniforme. Acabo de ver que IE7 parece rotar elementos absolutamente posicionados, y que es IE8 está teniendo problemas. – doub1ejack

Prueba este 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> 
    <title>Centrsource najboljše Ponudbe</title> 
    <style type="text/css"> 
    #content { 
    position: relative; 
    width: 300px; 
    height: 300px; 
    margin: 30px; 
    border-top: black 4px solid; 
    border-right: blue 4px solid; 
    border-bottom: black 4px dashed; 
    border-left: blue 4px dashed; 
    } 

.txtblock { 
display:block; 
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 
    -o-transform: rotate(-90deg); 
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); 
    } 


    </style> 
</head> 
<body> 
<div id="content"> 
    <div class="txtblock">Ardvark Avacado<br />Awkward</div> 
</div> 
</body> 

</html>

va a aplicar el código para el elemento incorrecto. También como referencia a otros en la comprensión de esto http://snook.ca/archives/html_and_css/css-text-rotation

Fuente

2010-04-13 15:22:21 easwee

Gracias, pero en cascada no debería? La posición de los niños debe ser relativa a su padre, es decir, deben recibir la misma rotación. Y si no puedo rotar al padre, tendría que establecer la rotación para cada niño ... y esa es una lista tediosa. – doub1ejack

Por lo que sé filtro: utiliza javascript como base para hacer todos los cálculos, por lo que no es realmente css, por lo que la cascada no se aplica. También IE siempre ha tenido su manera de manejar las cosas. P.s .: Marcar como resuelto si esta respuesta te ayudó. – easwee

no funciona IE7 !! –

Rotación CSS & IE: el posicionamiento absoluto parece romper IE

Respuesta

Cuestiones relacionadas