css - subrayado - text-decoration-line

CSS gira la propiedad en IE

Question

Quiero rotar el DIV hasta cierto punto. En FF funciona pero en IE estoy enfrentando un problema.

Por ejemplo, en el siguiente estilo puedo establecer la rotación = 1 a 4

 filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);

Esto significa que el DIV se rotará a 90 o 180 o 270 o 360 grados. Pero si necesito girar el DIV solo 20 grados, entonces ya no funciona.

¿Cómo puedo resolver este problema en IE?

Answer 1

Existe una herramienta en línea llamada IETransformsTranslator. Con esta herramienta puede hacer que el filtro de matriz transforme lo que funciona en IE6, IE7 e IE8. Simplemente pegue sus funciones de transformación CSS3 (por ejemplo, rotar (15deg)) y hará el resto. http://www.useragentman.com/IETransformsTranslator/

Answer 2

Para el ejemplo IE11 (tipo de navegador = versión Trident = 7.0):

image.style.transform = "rotate(270deg)";

Answer 3

Para girar 45 grados en IE, necesita el siguiente código en su hoja de estilo:

filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod=''auto expand'', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod=''auto expand'', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */

Notará de lo anterior que IE8 tiene una sintaxis diferente a IE6 / 7. Debe proporcionar ambas líneas de código si desea admitir todas las versiones de IE.

Los horribles números que hay en Radianos; Tendrás que calcular las cifras por ti mismo si quieres usar un ángulo que no sea de 45 grados (hay tutorials en Internet si los buscas).

También tenga en cuenta que la sintaxis de IE6 / 7 causa problemas para otros navegadores debido al símbolo de dos puntos no escaneado en la cadena de filtro, lo que significa que no es CSS válido. En mis pruebas, esto hace que Firefox ignore todo el código CSS después del filtro. Esto es algo que debes tener en cuenta, ya que puede causar horas de confusión si te atrapa. Lo resolví teniendo las cosas específicas de IE en una hoja de estilos separada que otros navegadores no cargaban.

Todos los demás navegadores actuales (incluidos IE9 e IE10 - ¡yay!) Admiten el estilo de transform CSS3 (aunque a menudo con prefijos de proveedor), por lo que puede usar el siguiente código para lograr el mismo efecto en todos los demás navegadores:

-moz-transform: rotate(45deg);  /* FF3.5/3.6 */
-o-transform: rotate(45deg);  /* Opera 10.5 */
-webkit-transform: rotate(45deg);  /* Saf3.1+ */
transform: rotate(45deg);  /* Newer browsers (incl IE9) */

Espero que ayude.

Editar

Como esta respuesta todavía está recibiendo votos, creo que debería actualizarla con información sobre una biblioteca JavaScript llamada Papel de lija CSS que le permite usar (casi) el código CSS estándar para rotaciones incluso en versiones anteriores de IE.

Una vez que haya agregado papel de lija CSS a su sitio, debe poder escribir el siguiente código CSS para IE6-8:

-sand-transform: rotate(40deg);

Mucho más fácil que el estilo de filter tradicional que normalmente necesitarías usar en IE.

Editar

También tenga en cuenta un capricho adicional específicamente con IE9 (y solo IE9), que admite tanto la transform estándar como el estilo antiguo IE -ms-filter . Si tiene ambos especificados, esto puede provocar que IE9 se confunda por completo y represente solo una caja negra sólida donde debería haber estado el elemento. La mejor solución para esto es evitar el estilo de filter mediante el uso del relleno de papel de lija mencionado anteriormente.

Answer 4

Solo una pista ... piénselo dos veces antes de usar "transform: rotate ()", o incluso "-ms-transform: rotate ()" (IE9) con dispositivos móviles.

He estado golpeando duro a la pared durante días. Tengo un sistema ''cinético'' en funcionamiento, que desliza imágenes y, encima, un área de comando. Me "transformé" en un botón de flecha para simular que apunta hacia arriba y hacia abajo ... ¡He revisado las más de 1.000 líneas de código por edades! ;-)

Todo bien, una vez que eliminé la transformación: rotate desde el CSS. Es un poco (no usar malas palabras) complicado por la forma en que IE lo maneja, en comparación con otros comandos.

¡Gran respuesta @Spudley! ¡Gracias por escribirlo!

Answer 5

Tendrá que hacer una transformación matricial de la siguiente manera:

filter: progid:DXImageTransform.Microsoft.Matrix(
  M11 = COS_THETA,
  M12 = -SIN_THETA,
  M21 = SIN_THETA,
  M22 = COS_THETA,
  sizingMethod = ''auto expand''
);
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(
  M11 = COS_THETA,
  M12 = -SIN_THETA,
  M21 = SIN_THETA,
  M22 = COS_THETA,
  SizingMethod = ''auto expand''
)";

Donde COS_THETA y SIN_THETA son los valores de coseno y seno del ángulo (es decir, 0.70710678 para 45 °).

Answer 6

http://css3please.com/

Desplácese hasta ''.box_rotate'' para el prefijo Microsoft IE9 +. Discusión similar aquí: Rotar un elemento Div en jQuery

Answer 7

http://www.useragentman.com/IETransformsTranslator/ para la transformación de IE

Esta herramienta convierte las propiedades de Transformación CSS3 (que usan casi todos los navegadores modernos) en CSS equivalente utilizando la tecnología de filtros visuales propiedad de Microsoft.