2011-02-01 18 views
75

में मेरे पास एक ऐसा तत्व है जिसे मैंने किए गए डिज़ाइन में लंबवत होने की आवश्यकता है। आईई 9 को छोड़कर मुझे सभी ब्राउज़रों में काम करने के लिए सीएसएस मिला है। मैं IE7 & IE8 के लिए फिल्टर का उपयोग किया:CSS3 रूपांतरण: घुमाने; आईई 9

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

हालांकि यह IE9 में अपने तत्व पारदर्शी और CSS3 के 'tranform' porperty प्रस्तुत करना लगता है कुछ भी करने को नहीं लगता है!

क्या कोई आईई 9 में घूर्णन तत्वों के किसी भी तरह से जानता है?

वास्तव में मदद की सराहना करते हैं!

डब्ल्यू

उत्तर

134

स्टैंडर्ड CSS3 घुमाने IE9 में काम करना चाहिए, लेकिन मैं आपको यह एक विक्रेता उपसर्ग, इसलिए की तरह देने की आवश्यकता का मानना ​​है:

-ms-transform: rotate(10deg); 

यह संभव है कि उस में काम नहीं कर सकता बीटा संस्करण; यदि नहीं, तो वर्तमान पूर्वावलोकन संस्करण (पूर्वावलोकन 7) डाउनलोड करने का प्रयास करें, जो बीटा में बाद में संशोधन है। मेरे पास परीक्षण करने के लिए बीटा संस्करण नहीं है, इसलिए मैं पुष्टि नहीं कर सकता कि यह उस संस्करण में था या नहीं। अंतिम रिलीज संस्करण निश्चित रूप से इसका समर्थन करने के लिए तैयार है।

मैं यह भी पुष्टि कर सकता हूं कि आईई-विशिष्ट filter संपत्ति आईई 9 में गिरा दी गई है।

[संपादित करें]
लोगों ने कुछ और दस्तावेज मांगे हैं। जैसा कि वे कहते हैं, यह काफी सीमित है, लेकिन मुझे यह पृष्ठ मिला: http://css3please.com/ जो सभी ब्राउज़रों में विभिन्न CSS3 सुविधाओं का परीक्षण करने के लिए उपयोगी है।

लेकिन आईई 9 पूर्वावलोकन में इस पृष्ठ पर घुमावदार सुविधा का परीक्षण करने से यह काफी शानदार रूप से दुर्घटनाग्रस्त हो गया।

हालांकि मैंने अपने स्वयं के टेस्ट पृष्ठों में आईई 9 में -ms-transform:rotate() का उपयोग करके कुछ स्वतंत्र परीक्षण किए हैं, और यह ठीक काम कर रहा है। तो मेरा निष्कर्ष यह है कि सुविधा लागू की गई है, लेकिन कुछ बग्स हैं, संभवतः इसे गतिशील रूप से सेट करने से संबंधित हैं।

एक और उपयोगी संदर्भ बिंदु है जिसके लिए सुविधाओं, जिसमें लागू किया जाता है ब्राउज़र www.canIuse.com है - http://caniuse.com/#search=rotation

[संपादित करें]
देखते हैं कि यह वर्ष जवाब को फिर से जीवित है क्योंकि मैं हाल ही में पता चला एक हैक CSS Sandpaper कहा जाता है के बारे में जो प्रश्न के लिए प्रासंगिक है और चीजों को आसान बना सकता है।

हैक आईई के पुराने संस्करणों के लिए मानक सीएसएस transform के लिए समर्थन लागू करता है। तो अब आप अपने सीएसएस के लिए निम्न जोड़ सकते हैं:

-sand-transform: rotate(10deg); 

... और यह आईई 6/7/8 में काम किया है, filter वाक्य रचना का उपयोग किए बिना। (जाहिर है यह अभी भी पर्दे के पीछे फिल्टर सिंटैक्स का उपयोग करता है, लेकिन यह यह एक बहुत क्योंकि यह अन्य ब्राउज़रों के समान सिंटैक्स का उपयोग है का प्रबंधन करने के आसान बनाता है)

+0

धन्यवाद स्पड! मैं इसे अभी देख रहा हूं और उस पर वापस आऊंगा। विश्वास नहीं कर सका कि इस ऑनलाइन के बारे में कितना कम दस्तावेज था। – wilsonpage

+0

@Spudley क्या आप एक स्रोत पोस्ट कर सकते हैं? आप कर रहे हैं ठीक है, बहुत ज्यादा नहीं - मुझे लगता है कि खोजने के लिए MSDN पर http://msdn.microsoft.com/en-us/library/ms531207(v=vs.85).aspx –

+0

@ Šime Vidas और @pagewil नहीं पा रहा हूँ दस्तावेज चारों ओर। मैंने इसे यहां दस्तावेज किया: http://css3please.com/, हालांकि मुझे ध्यान रखना चाहिए कि जब मैंने घुमावदार संपत्ति का उपयोग करने की कोशिश की तो इस पृष्ठ ने आईई 9 पूर्वावलोकन की मेरी प्रति क्रैश कर दी। हालांकि, मेरे अपने स्वतंत्र परीक्षणों ने पुष्टि की है कि संपत्ति काम करता है, वेंडर उपसर्ग के साथ जैसा कि मैंने अपने उत्तर में उद्धृत किया है। (दुर्घटना को देखते हुए, मुझे लगता है कि वहाँ अभी भी उस में कीड़े हालांकि कर रहे हैं!) – Spudley

4

मैं भी IE9 में परिवर्तनों के साथ समस्या नहीं थी, मैं -ms-transform: rotate(10deg) का इस्तेमाल किया और यह नहीं था काम नहीं करता मैं जो भी कर सकता था, कोशिश की, लेकिन समस्याएं ब्राउज़र मोड में थीं, ट्रांसफॉर्मेशन काम करने के लिए, आपको "मानक IE9" पर संगतता मोड सेट करने की आवश्यकता है।

+1

प्रेस F12 और फिर जाँच इस काम करेगा: फिल्टर: ProgID –

+3

आईई 9 के लिए वर्टिकल टेक्स्ट के साथ काम करने के लिए, आपको अपनी फ़ाइल की पहली दो पंक्तियों के रूप में निम्न का उपयोग करके क्विर्क मोड बंद करना होगा: '' ' ' – GlenPeterson

+3

किसी भी वैध डॉक्ट टाइप को क्विर्क मोड को अक्षम करना चाहिए, उदाहरण के लिए: । डिफ़ॉल्ट रूप से ब्राउज़र मोड IE9 होना चाहिए, जब तक कि आप अपनी सेटिंग्स बदल नहीं लेते। – superluminary

5

प्रयास करें इस

<!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> 
+0

मैं इस कोड को यानी 9, फ़ायरफ़ॉक्स, क्रोम, सफारी और उसके काम के साथ आजमाएं –

3

मैं जानता हूँ कि यह पुराना है, लेकिन मैं यह एक ही मुद्दा हो रही थी, इस पोस्ट पाया, और जबकि यह स्पष्ट नहीं था कि वास्तव में क्या गलत था, यह मुझे सही जवाब में मदद की - इसलिए उम्मीद है कि मेरा जवाब किसी और की मदद करता है जो मेरे लिए एक जैसी समस्या हो सकती है।

मैं एक तत्व मैं खड़ी घुमाया चाहता था, इसलिए स्वाभाविक रूप से मैं फिल्टर कहा: IE8 के लिए और उसके बाद IE9 के लिए संपत्ति एमएस-बदलना। मुझे जो मिला वह यह है कि -एम-ट्रांसफॉर्म प्रॉपर्टी होने और फ़िल्टर को उसी तत्व पर लागू करने से आईई 9 तत्व को बहुत खराब तरीके से प्रस्तुत करता है। मेरा समाधान:

  1. यदि आप ट्रांसफॉर्म-मूल संपत्ति का उपयोग कर रहे हैं, तो एमएस के लिए भी एक जोड़ें (-ms-transform-orig: left bottom;)। यदि आप अपना तत्व नहीं देखते हैं, तो यह हो सकता है कि यह इसके मध्य धुरी पर घूम रहा हो और इस प्रकार पृष्ठ को किसी भी तरह से छोड़ दे - तो इसे दोबारा जांचें।

  2. फ़िल्टर को ले जाएं: IE7 & 8 के लिए एक अलग स्टाइल शीट के लिए संपत्ति और IE9 से कम ब्राउज़र के लिए स्टाइल शीट डालने के लिए आईई सशर्त का उपयोग करें। इस तरह यह आईई 9 शैलियों को प्रभावित नहीं करता है और सभी को ठीक काम करना चाहिए।

  3. रूप में अच्छी तरह से सही DOCTYPE टैग का उपयोग सुनिश्चित करें; यदि आपके पास यह गलत है तो IE9 ठीक से काम नहीं करेगा।

+1

'-ms-transform-origin' पर अच्छी कॉल; जिसने मुझे थोड़ी देर के लिए अपने सिर खरोंच कर दिया था। – danwild