Estoy usando la regla CSS3 "rotar" para rotar un div
que contiene texto. Puede ver la página aquí: http://vitaminjdesign.com/v2/socialmedia.html. Estoy buscando compatibilidad con varios navegadores para rotar el div
; sin embargo, esta regla CSS3 no funcionará en IE. ¿Hay una opción de jQuery u otra solución de JavaScript que produzca el mismo resultado, con compatibilidad entre navegadores?CSS3 rotate alternative?
Respuesta
Usando Sandpaper, puede utilizar esta regla CSS:
-sand-transform: rotate(90deg);
y va a trabajar en todos los navegadores - incluso en el IE.
Usaría Raphael y Cufon para este tipo de cosas, aunque tiene que enrollar su propio ajuste de palabras al rotar porque tendrá que usar print
de Raphael en lugar de replace
de Cufon. De esta forma, las fuentes son vectores y las rotaciones se manejan de una manera puramente geométrica.
Los problemas actuales con css-rotate van más allá de la compatibilidad entre navegadores, sin embargo, en los navegadores que sí lo admiten, los resultados a menudo se ven como basura. Su sitio en Firefox 3.6 parece una mezcolanza alias sobre líneas base irregulares. Sé que hiciste una pregunta específica, la cual hice lo mejor que pude para responder, pero mi consejo para ti es que te deshagas de los gastos generales de las bibliotecas js por lo que estás tratando de lograr aquí, y solo opto por una imagen de alta calidad. Ya ha invertido ancho de banda en la imagen de fondo "colgar etiquetas", por lo que el costo de agregar texto a esa imagen es mínimo, mientras que el costo de bibliotecas js completamente nuevas para manejar el problema de la rotación de texto correctamente será bastante alto. No es la solución más innovadora, te lo concederé ... pero ahí es donde estamos hoy.
Estoy completamente de acuerdo ... pero para fines de SEO (de una empresa de diseño web) eso no es una opción. – JCHASE11
Si desea rotaciones CSS compatible con versiones antiguas de IE, hay una filter progid:DXImageTransform.Microsoft.Matrix
para eso, sino que se puede aplicar sólo una vez y muchos cálculos están implicados cuando se calcula la matriz último out.
- 1. UINavigationController Force Rotate
- 2. levenshtein alternative
- 3. app_offline alternative
- 4. CATransform3DRotate rotate para 360 grados
- 5. C# rotate bitmap 90 degrees
- 6. Rotar texto con CSS3/HTML5
- 7. JavaScript if alternative
- 8. Android emulator alternative
- 9. Ruby alternative to Scrapy?
- 10. commons beanutils alternative
- 11. excel interop alternative
- 12. JIRA/confluence alternative
- 13. Google appengine datastore alternative?
- 14. shlex alternative for Java
- 15. PHP get_headers() alternative
- 16. ExpressionHelper.GetExpressionText (LambdaExpression) alternative
- 17. Python alternative to reduce()
- 18. Alternative to Flex Framework
- 19. Activator.CreateInstance Performance Alternative
- 20. CDI: @alternative vs @Qualifiers
- 21. PHP get_called_class() alternative
- 22. php: array_replace_recursive alternative
- 23. svn "git add" alternative?
- 24. java web start alternative
- 25. window.innerHeight ie8 alternative
- 26. Reproducir la transformación css3 con jquery
- 27. animación css3 que no funciona en cromo
- 28. Retrasar animaciones de CSS3
- 29. La animación CSS3 no funciona en IE9
- 30. transición de CSS3 arruinando fuentes en webkit?
esto se ve bien. Lo probaré y te llamaré – JCHASE11
, como css3, la representación del texto no es uniforme. Esta es mi mejor opción, pero no es una GRAN opción. – JCHASE11
no funciona tan bien ... – JCHASE11