我正在使用CSS3規則「旋轉」來旋轉包含文本的div
。你可以在這裏看到這個頁面:http://vitaminjdesign.com/v2/socialmedia.html。我正在尋找跨瀏覽器支持旋轉div
;但是,這個CSS3規則不適用於IE。是否有一個jQuery選項或另一個JavaScript解決方案可以產生相同的結果,並具有跨瀏覽器兼容性?CSS3旋轉替代?
8
A
回答
11
1
我會用Raphael和Cufon來做這類事情,但是當你旋轉的時候你必須用自己的文字包裝,因爲你必須用Raphael的print
而不是Cufon的replace
。這樣字體就是矢量,旋轉是以純幾何的方式處理的。
目前css-rotate的問題超出了跨瀏覽器的兼容性,但是 - 在支持它的瀏覽器中,結果通常看起來像垃圾。在我的Firefox 3.6中,您的網站看起來像是在不均勻基線上的別名混雜。我知道你問了一個具體的問題,我盡力回答,但我對你的建議是把js庫的開銷放在你想要在這裏完成的任務,並且只需要一個高質量的圖像。您已經在「懸掛標籤」背景圖片中投入了帶寬,因此向該圖片添加文本的成本很低,而全新js庫爲您正確處理文本旋轉問題的成本將非常高。不是最尖端的解決方案,我會授予你......但那就是我們今天的地方。
+0
我完全同意...但對於SEO目的(從網頁設計公司),這是不是一個選項。 – JCHASE11 2010-05-01 15:18:48
2
如果您希望css旋轉與IE的舊版本兼容,那麼可以使用它,但它只能應用一次,並且在計算最終的矩陣時會涉及許多計算。
相關問題
- 1. CSS3旋轉動畫
- 2. CSS3旋轉問題
- 3. CSS3旋轉變換
- 4. 旋轉的頭CSS3
- 5. CSS3旋轉的Linux
- 6. 圍繞替代軸旋轉
- 7. css3滑塊自動旋轉
- 8. 如何旋轉在CSS3
- 9. 旋轉div與角度css3
- 10. CSS3旋轉和起源
- 11. CSS3&HTML5 - 旋轉對象組
- 12. 在Safari中旋轉CSS3轉換
- 13. CSS3轉換保持重置旋轉
- 14. java替代備份旋轉算法
- 15. CSS3過渡代替.animate()
- 16. bikeshedding CSS3屬性替代?
- 17. CSS3旋轉div,但保持背景不旋轉
- 18. Css3旋轉,如何給深度
- 19. css3在Internet Explorer中旋轉ul dissapears
- 20. 文本決心CSS3錯誤旋轉
- 21. CSS3 vs Canvas的文字旋轉
- 22. 第二次防止CSS3旋轉
- 23. 製作CSS3漸變背景旋轉
- 24. 如何找到元素的CSS3旋轉?
- 25. css3旋轉只是背景或面具
- 26. 從matrix3d獲取CSS3旋轉週期數
- 27. CSS3只有滑塊連續旋轉
- 28. CSS3動畫旋轉方向 - 選擇框
- 29. CSS3變換旋轉改變流動
- 30. css3變換:旋轉移動視圖
這看起來不錯。我會試試看,並且像css3一樣回覆給你 – JCHASE11 2010-05-01 15:20:18
,文本的渲染並不平滑。這是我的最佳選擇,但它不是一個好選擇。 – JCHASE11 2010-05-01 15:26:00
工作不太好...... – JCHASE11 2010-05-01 15:51:24