Tengo un elemento que necesita ser vertical en un diseño que he hecho. Tengo el css para que esto funcione en todos los navegadores excepto en IE9. He utilizado el filtro para IE7 & IE8:

progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

Sin embargo, esto parece representar mi elemento transparente en IE9 y el CSS3 ‘transformar’ propiedad no parece hacer nada!

¿Alguien sabe de todos modos de rotación de elementos en IE9?

Realmente agradezco la ayuda!

W.

InformationsquelleAutor wilsonpage | 2011-02-01

4 Comentarios

  1. 137

    Estándar CSS3 girar deben trabajar en IE9, pero creo que usted necesita para darle un proveedor de prefijo, así:

      -ms-transform: rotate(10deg);

    Es posible que no funcionen en la versión beta; si no, intenta descargar de la actual versión preview (vista previa 7), que es una revisión posterior que la beta. No tengo la versión beta para probar en contra, así que no puedo confirmar si era en esa versión o no. La versión final es, sin duda, programado para el apoyo.

    También puedo confirmar que el IE específicos filter propiedad ha caído en IE9.

    [Editar]

    Las personas que han pedido más documentación. Como dicen, esta es bastante limitada, pero encontré esta página: http://css3please.com/ que es útil para probar diferentes funciones CSS3 en todos los navegadores.

    Pero las pruebas de la función de rotación en esta página en IE9 vista previa causó accidente bastante espectacular.

    Sin embargo he hecho algunas independiente mediante pruebas de -ms-transform:rotate() en IE9 en mis propias páginas de prueba, y se está trabajando muy bien. Así que mi conclusión es que la función está implementada, pero tiene algunos errores, posiblemente relacionadas con la configuración de forma dinámica.

    Otro punto de referencia útil para qué características se implementan en la que los navegadores http://www.canIuse.com — ver http://caniuse.com/#search=rotation

    [EDITAR]

    La reactivación de este viejo respuesta porque hace poco me enteré de un hack llamado CSS papel de Lija que es relevante para la pregunta y puede hacer las cosas más fáciles.

    El hack implementa el soporte para el estándar CSS transform para para versiones antiguas de IE. Así que ahora usted puede agregar lo siguiente a tu CSS:

    -sand-transform: rotate(10deg);

    …y que funcionan en internet explorer 6/7/8, sin tener que utilizar el filter sintaxis. (por supuesto que todavía utiliza la sintaxis del filtro detrás de las escenas, pero esto hace que sea mucho más fácil de administrar debido a que es el uso de sintaxis similar a la de otros navegadores)

    • Gracias Espita! Voy a comprobarlo ahora y volver a usted en eso. No podía creer lo poco que la documentación no fue acerca de esto en línea.
    • Podría publicar una fuente? Yo no soy capaz de encontrar que en MSDN msdn.microsoft.com/en-us/library/ms531207(v=vs 85).aspx
    • Vidas y @pagewil – tienes razón, no mucho documentación de todo. He encontrado documentado aquí: css3please.com, aunque debo señalar que esta página se estrelló mi copia de IE9 vista previa cuando traté de usar el rotar de la propiedad. Sin embargo, mi propia independiente de pruebas han confirmado que la propiedad no funciona, con el proveedor de prefijo, como he citado en mi respuesta. (dado el accidente, supongo que todavía hay errores en ella, aunque!)
    • Realmente no sé por qué girar necesita un proveedor de prefijo, cuando van de serie con el resto de CSS3
    • posiblemente debido a que la norma no ha sido aún terminado?
    • sí, pero no está finalizado por el otro las propiedades de
    • No lo sé. Los vendedores realmente para decidir si está listo en su navegador para que la característica colocar el prefijo. Parece que es estable, pero transform cubre un montón de cosas, así que tal vez todavía hay un poco de debate en el W3C sobre algún aspecto de ella? Lo que sea, cada vendedor tiene que tomar esa decisión cuando ellos sienten que están listos.
    • Por desgracia no apoyo rotateX, rotateY -_-. El simple rotateZ que está implícito en el rotate().
    • Estoy recibiendo nada de cualquiera de estas reglas en IE9 para girar
    • la razón más probable es que si se ejecuta en modo de compatibilidad. Seleccione el modo pulsando F12 para abrir el dev tools.
    • También, preste atención a la crossbrowser línea que debe ser excluido para IE9+: filter: progid:DXImageTransform.Microsoft.BasicImage(rotación=3)

  2. 5

    Probar este

    <!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 type="text/css">
    body {
        margin-left: 50px;
        margin-top: 50px;
        margin-right: 50px;
        margin-bottom: 50px;
    }
    .rotate {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 16px;
        -webkit-transform: rotate(-10deg);
        -moz-transform: rotate(-10deg);
        -o-transform: rotate(-10deg);
        -ms-transform: rotate(-10deg);
        -sand-transform: rotate(10deg);
        display: block;
        position: fixed;
    }
    </style>
    </head>
    
    <body>
    <div class="rotate">Alpesh</div>
    </body>
    </html>
    • trato de este código con ie9, FireFox, Chrome, Safari & es un trabajo
  3. 4

    También tuve problemas con las transformaciones en IE9, he utilizado -ms-transform: rotate(10deg) y no funcionó. Intenté todo lo que pude, pero el problema estaba en modo navegador, para hacer transformaciones de trabajo, es necesario establecer el modo de compatibilidad para «Estándar IE9».

    • presione f12 en ie y seleccione cambiar el modo explorador para ie-9 y, a continuación, compruebe esto va a funcionar…
    • Para IE9 para trabajar con texto vertical, tienes que apagar las peculiaridades del modo de uso de las siguientes como las dos primeras líneas del archivo: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    • Cualquier válido doctype debe deshabilitar peculiaridades modo, por ejemplo: <!DOCTYPE html>. El navegador en el modo de IE9 por defecto, a menos que hayas cambiado la configuración.
  4. 3

    Sé que esto es viejo, pero yo tenía este mismo problema, encontré este post, y aunque no explican exactamente lo que estaba mal, que me ayudó a la respuesta correcta, así que espero que mi respuesta te ayuda a alguien más que podría estar teniendo un problema similar al mío.

    Tuve un elemento quería girar vertical, por lo que, naturalmente, he añadido el filtro: para IE8 y, a continuación, el ms-propiedad de transformación de IE9. Lo que he encontrado es que el hecho de -ms-transformación de la propiedad Y el filtro aplicado el mismo elemento hace que IE9 para representar el elemento muy mal. Mi solución:

    1. Si usted está utilizando la transformación de origen de los bienes, agregar uno para MS demasiado (-ms-transform-origin: a la izquierda abajo;). Si usted no ve su elemento, podría ser que la rotación sobre el eje central y por lo tanto salir de la página de alguna manera – así que revise que.

    2. Mover el filtro: propiedad para IE7&8 a una hoja de estilos aparte y el uso de IE condicional para insertar la hoja de estilo para los navegadores menos de IE9. De esta manera no afectar el IE9 estilos y todo debería funcionar bien.

    3. Asegúrese de utilizar la correcta etiqueta DOCTYPE así; si usted tiene mal IE9 no funciona correctamente.

    • Buena llamada en -ms-transform-origin; que me había rascado la cabeza por un tiempo.

Dejar respuesta

Please enter your comment!
Please enter your name here