😀 ⚡️ 💇🏻 जावास्क्रिप्ट के बिना इंटरनेट एक्सप्लोरर 6,7,8 में किसी भी प्रकार के गोल कोनों को बनाने का सबसे आसान तरीका 👨🏽‍🎤 🕤 👨🏽‍🤝‍👨🏻

अगली परियोजना जो मुझे करनी है, उसके लिए बहुत ही गोल कोनों की आवश्यकता है। ग्राहक और डिजाइनर के साथ बात करने के बाद, हम इस निष्कर्ष पर पहुंचे कि इंटरनेट एक्सप्लोरर 8 को इन्हीं गोल कोनों की जरूरत है। जो वास्तव में मुझे इस तरह के फ्रेम, बटन और अन्य चिप्स को साइट पर व्यवस्थित करने के लिए सबसे सरल और तेज़ तरीके से महसूस करने के लिए प्रेरित करता है। चित्रों और लिपियों के उपयोग के बिना। इस पद्धति को लागू करते समय, मुझे कुछ नुकसानों का सामना करना पड़ा और वर्कअराउंड की तलाश करनी पड़ी। मेरी कार्यान्वयन विधि क्या है और मुझे क्या सामना करना पड़ा है, नीचे पढ़ें।

थोड़ा इतिहास

जैसा कि हम सभी याद करते हैं और जानते हैं, इंटरनेट एक्सप्लोरर में गोल कोनों को लागू करने के तरीके इंटरनेट के आसपास बहुत बिखरे हुए हैं। एक लोकप्रिय तरीका CSS3PIE जावास्क्रिप्ट लाइब्रेरी है। जावास्क्रिप्ट का उपयोग करने वाले कई अन्य पुस्तकालय भी हैं। v:roundrect में v:roundrect साथ इसे लागू करने के सरल तरीके हैं v:roundrect । और कोई कोने में चित्रों के साथ करता है।

कार्यान्वयन विधियों में से प्रत्येक अपने फायदे और नुकसान लाता है। उदाहरण के लिए, जावास्क्रिप्ट पुस्तकालयों ब्राउज़र को बहुत अधिक ध्यान से लोड करते हैं और साइट का प्रदर्शन वांछित होने के लिए बहुत कुछ छोड़ देता है, यह उन मामलों में विशेष रूप से ध्यान देने योग्य होता है जब पृष्ठ पर बड़ी संख्या में तत्वों को रखा जाता है जिन्हें गोल कोनों की आवश्यकता होती है। कभी-कभी जावास्क्रिप्ट लाइब्रेरीज़ तत्वों को सही ढंग से प्रस्तुत नहीं करते हैं या बिल्कुल भी प्रस्तुत नहीं करते हैं।

चित्रों के साथ विधि ब्राउज़र पर लोड को कम करती है और पृष्ठ आमतौर पर स्मार्ट तरीके से काम करता है, लेकिन यह विधि उन मामलों में लागू नहीं की जा सकती है जब साइट के एक बड़े हिस्से में विषम प्रकार के फ्रेम आदि होते हैं। इस विधि को केवल स्वचालित रूप से किनारे पर छोड़ दिया जाता है और एक विकल्प की खोज की जाती है, उदाहरण के लिए, सही कोणों के साथ फ़्रेम को छोड़ने के लिए या साइट के लुक को खराब नहीं करने वाले कुछ तत्वों को पूरी तरह से त्यागने के लिए।

मेरी राय में वीएमएल का उपयोग करने का तरीका सबसे इष्टतम है। वीएमएल काफी पुराना है और वेक्टर ग्राफिक्स खींचने के लिए बहुत कम अध्ययन वाली भाषा है, यह एसवीजी विकसित करने का पूर्वज है। इस पर बिखरी जानकारी इंटरनेट पर बिखरी पड़ी है। विनिर्देशन खराब है। और भविष्य में वे उसके बारे में पूरी तरह से भूल जाएंगे। लेकिन फिलहाल यह उसकी मदद से है कि हमें अपने गोल कोनों का एहसास होगा।

ट्रेनिंग

इंटरनेट एक्सप्लोरर में वीएमएल प्रदर्शित करने के लिए, आपको कुछ चीजें करने की जरूरत है, पहले HEAD सेक्शन में पेज पर एक विशेष टैग जोड़ें

 <!--[if VML&(lt IE 9)]> <?import namespace="v" urn="urn:schemas-microsoft-com:vml" implementation="#default#VML" declareNamespace ?> <![endif]-->

यह टैग ब्राउज़र को बताता है कि `v` इंजन को किस प्रकार के तत्व दिए जाने चाहिए, हमारे मामले में उपसर्ग (नेमस्पेस) `v` वाले तत्वों को VML इंजन द्वारा संसाधित किया जाएगा, टैग को सशर्त टिप्पणियों में भी शामिल किया गया है ताकि अन्य `v` इस अनावश्यक प्रक्रिया न करें उन्हें टैग करें।

अगला, आपको यह निर्दिष्ट करना होगा कि तत्व VML की तरह व्यवहार करते हैं। यह सीएसएस संपत्ति behavior:url(#default#VML) । ऐसा करने के लिए, हम सशर्त टिप्पणियों में एक शैली जोड़ेंगे:

 <!--[if VML&(lt IE 9)]> <style type="text/css"> v\:shape, v\:shapetype, v\:formulas, v\:group, v\:f, v\:path, v\:fill { behavior:url(#default#VML); } v\:group, v\:shape { display:inline-block; left: 0px; top: 0px; width: 100%; height: 100%; } </style> <![endif]-->

स्टाइल्स आप एक अलग स्टाइलशीट में रख सकते हैं ताकि मार्कअप को अव्यवस्थित न करें। दरअसल, यह वह जगह है जहां तैयारी समाप्त होती है, यहां हमने यह स्पष्ट कर दिया कि ब्राउज़र को वीएमएल इंजन को कौन से टैग भेजना चाहिए।

हम सूत्र बताते हैं

यहां हम हैं और हम सूत्रों का उपयोग करके वीएमएल में बहुक्रियाशील border-radius को लागू करना शुरू करेंगे। सूत्र कुछ नियम हैं जो VML इंजन को बताते हैं कि कुछ शर्तों के तहत कैसे व्यवहार किया जाए। यह वे हैं जो हमें वेक्टर ग्राफिक्स प्रदान करने की गति बढ़ाने के लिए जावास्क्रिप्ट को छोड़ने का अवसर देते हैं। मैं सूत्रों की कार्यक्षमता का वर्णन नहीं करूंगा, उनके साथ कैसे काम करना है, उनका उपयोग कैसे करना है, क्योंकि हम वीएमएल नहीं बल्कि गोल कोनों को सीख रहे हैं। वीएमएल फ़ार्मुलों को लागू करने का एक काफी शक्तिशाली तरीका है कि जावास्क्रिप्ट में कई लागू किए बिना यह महसूस करते हैं कि इसके बिना किया जा सकता है।

इसलिए, मैंने सूत्रों का उपयोग करके गोल फ्रेम के कार्यान्वयन के लिए एक निश्चित टेम्पलेट लागू किया। इस टेम्पलेट का उपयोग हम अपने आवश्यक फ्रेम बनाने के लिए करेंगे:

 <v:shapetype id="vml-radius" adj="0,0,0,0" coordorigin="-1 -1" coordsize="1000000 1000000" path="m,@9qy@8,l@15,qx@0,@16l@0,@24qy@22,@1l@29,@1qx,@31l,@9xm@44,@54qy@49,@36 l@60,@36qx@39,@65l@39,@77qy@71,@42l@82,@42qx@44,@88l@44,@54xe" stroked="false"> <v:formulas> <v:f eqn="val width"/><v:f eqn="val height"/><v:f eqn="prod @0 1 pixelwidth"/> <v:f eqn="prod @1 1 pixelheight"/><v:f eqn="prod #0 1 10000"/><v:f eqn="prod @4 10000 1"/> <v:f eqn="sum #0 0 @5"/><v:f eqn="if @4 @4 @6"/><v:f eqn="prod @7 @2 1"/> <v:f eqn="prod @6 @3 1"/><v:f eqn="prod #1 1 10000"/><v:f eqn="prod @10 10000 1"/> <v:f eqn="sum #1 0 @11"/><v:f eqn="if @10 @10 @12"/><v:f eqn="sum pixelwidth 0 @13"/> <v:f eqn="prod @14 @2 1"/><v:f eqn="prod @12 @3 1"/><v:f eqn="prod #2 1 10000"/> <v:f eqn="prod @17 10000 1"/><v:f eqn="sum #2 0 @18"/><v:f eqn="if @17 @17 @19"/> <v:f eqn="sum pixelwidth 0 @20"/><v:f eqn="prod @21 @2 1"/><v:f eqn="sum pixelheight 0 @19"/> <v:f eqn="prod @23 @3 1"/><v:f eqn="prod #3 1 10000"/><v:f eqn="prod @25 10000 1"/> <v:f eqn="sum #3 0 @26"/><v:f eqn="if @25 @25 @27"/><v:f eqn="prod @28 @2 1"/> <v:f eqn="sum pixelheight 0 @27"/><v:f eqn="prod @30 @3 1"/><v:f eqn="sum #4 #6 0"/> <v:f eqn="sum #5 #7 0"/><v:f eqn="sum @32 @33 0"/><v:f eqn="prod #4 @3 1"/> <v:f eqn="if @34 @35 @9"/><v:f eqn="prod #5 @2 1"/><v:f eqn="sum @0 0 @37"/> <v:f eqn="if @34 @38 0"/><v:f eqn="prod #6 @3 1"/><v:f eqn="sum @1 0 @40"/> <v:f eqn="if @34 @41 @9"/><v:f eqn="prod #7 @2 1"/><v:f eqn="if @34 @43 0"/> <v:f eqn="sum @7 0 #7"/><v:f eqn="if @45 @45 0"/><v:f eqn="prod @46 @2 1"/> <v:f eqn="sum @47 @43 0"/><v:f eqn="if @34 @48 0"/><v:f eqn="sum @6 0 #4"/> <v:f eqn="if @50 @50 0"/><v:f eqn="prod @51 @3 1"/><v:f eqn="sum @52 @35 0"/> <v:f eqn="if @34 @53 @9"/><v:f eqn="sum @13 0 #5"/><v:f eqn="if @55 @55 0"/> <v:f eqn="sum pixelwidth 0 @56"/><v:f eqn="prod @57 @2 1"/><v:f eqn="sum @58 0 @37"/> <v:f eqn="if @34 @59 0"/><v:f eqn="sum @12 0 #4"/><v:f eqn="if @61 @61 0"/> <v:f eqn="prod @62 @3 1"/><v:f eqn="sum @63 @35 0"/><v:f eqn="if @34 @64 @9"/> <v:f eqn="sum @20 0 #5"/><v:f eqn="if @66 @66 0"/><v:f eqn="sum pixelwidth 0 @67"/> <v:f eqn="prod @68 @2 1"/><v:f eqn="sum @69 0 @37"/><v:f eqn="if @34 @70 0"/> <v:f eqn="sum @19 0 #6"/><v:f eqn="if @72 @72 0"/><v:f eqn="sum pixelheight 0 @73"/> <v:f eqn="prod @74 @3 1"/><v:f eqn="sum @75 0 @40"/><v:f eqn="if @34 @76 @9"/> <v:f eqn="sum @28 0 #7"/><v:f eqn="if @78 @78 0"/><v:f eqn="prod @79 @2 1"/> <v:f eqn="sum @80 @43 0"/><v:f eqn="if @34 @81 0"/><v:f eqn="sum @27 0 #6"/> <v:f eqn="if @83 @83 0"/><v:f eqn="sum pixelheight 0 @84"/><v:f eqn="prod @85 @3 1"/> <v:f eqn="sum @86 0 @40"/><v:f eqn="if @34 @87 @9"/> </v:formulas> </v:shapetype>

एक विशाल टेम्पलेट यह नहीं है? लेकिन यह डरावना नहीं है, क्योंकि जावास्क्रिप्ट आमतौर पर बहुत अधिक स्थान लेता है, टेम्पलेट को केवल एक बार पृष्ठ पर रखा जाता है और v:shapetype में ID विशेषता में निर्दिष्ट vml-radius कुंजी के साथ प्रयोग किया जाता है। हम इस टैग को सशर्त टिप्पणियों में कहीं भी HEAD टैग में रख सकते हैं।

गोल कोनों को ड्रा करें

अब हम आसानी से गोल कोनों के साथ फ्रेम खींच सकते हैं:

 <v:shape adj="16,16,16,16" fillcolor="#00ff00" style="width: 100px; height: 100px;" type="#vml-radius" />

यहां हमने गोल कोनों के साथ एक साधारण हरे वर्ग को आकर्षित किया, जिसकी त्रिज्या 16 पिक्सेल है। जैसा कि आपने कोनों की त्रिज्या पर ध्यान दिया है, हम विशेषता adj="16,16,16,16" में इंगित करते हैं। और अब इस वर्ग के लिए सीमाओं को जोड़ते हैं, उदाहरण के लिए लाल:

 <v:group style="width: 100px; height: 100px;"> <v:shape adj="16,16,16,16" fillcolor="#00ff00" type="#vml-radius" /> <v:shape adj="16,16,16,16,10,10,10,10" fillcolor="#ff0000" type="#vml-radius" /> </v:group>

यहां आपने और मैंने परतों का एक समूह बनाया, अर्थात्, लाल सीमाओं को हरे रंग के वर्ग पर रखा गया था, और जैसा कि आपने देखा कि adj विशेषता ने अतिरिक्त मापदंडों को सीमा की मोटाई का संकेत दिया।

कभी-कभी कोनों को एक समान नहीं करना आवश्यक होता है, लेकिन अंडाकार। अर्थात्, कोण का आकार एक है, और क्षैतिज रूप से दूसरा, उदाहरण के लिए, ऐसा वर्ग:

ऐसा करने के लिए, हम adj पैरामीटर को थोड़ा समायोजित करेंगे:

 <v:group style="width: 100px; height: 100px;"> <v:shape adj="00320064,16,00320064,16" fillcolor="#00ff00" type="#vml-radius" /> <v:shape adj="00320064,16,00320064,16,10,10,10,10" fillcolor="#ff0000" type="#vml-radius" /> </v:group>

पृष्ठभूमि जोड़ें:

 <v:group style="width: 100px; height: 100px;"> <v:shape adj="00320064,16,00320064,16" type="#vml-radius"> <v:fill type="tile" src="http://img-fotki.yandex.ru/get/4424/104967700.7f/0_7a378_1c3ad751_S.jpg" /> </v:shape> <v:shape adj="00320064,16,00320064,16,10,0,10,0" fillcolor="#ff0000" type="#vml-radius" /> </v:group>

या एक ढाल के साथ भरें:

 <v:group style="width: 100px; height: 100px;"> <v:shape adj="00320064,16,00320064,16" type="#vml-radius"> <v:fill type="gradient" angle="0" color="#D0E805" color2="#E88A05" /> </v:shape> <v:shape adj="00320064,16,00320064,16,10,0,10,0" fillcolor="#ff0000" type="#vml-radius" /> </v:group>

एक ढाल का उपयोग करके एक परिदृश्य बनाएं:

 <v:group style="width: 100px; height: 100px;"> <v:shape adj="00320064,16,00320064,16" type="#vml-radius"> <v:fill type="gradient" method="sigma" angle="0" color="#ff0000" colors="40% #0fff00,60% #00fff0" color2="#0000ff" /> </v:shape> <v:shape adj="00320064,16,00320064,16,10,0,10,0" fillcolor="#ff0000" type="#vml-radius" /> </v:group>

मापदंडों

आप तत्वों के लिए मापदंडों के मानक का वर्णन पढ़ सकते हैं, उदाहरण के लिए, Microsoft से, मैं केवल adj पैरामीटर का वर्णन करूंगा, adj पैरामीटर में केवल कॉमा द्वारा अलग किए गए आठ मान हैं, उनमें से पहले चार कोने के त्रिज्या को इंगित करते हैं, दूसरा संकेत सीमा की मोटाई को दर्शाता है।

पहले चार मापदंडों में मुश्किल बारीकियाँ हैं। यदि संख्या 10000 से कम है 10000 तो कोण क्षैतिज और लंबवत दोनों समान होंगे। उदाहरण के लिए, प्रवेश 00320064 इंगित करता है कि आपको क्षैतिज रूप से 32 पिक्सेल का कोण और 64 पिक्सेल लंबवत रूप से खींचना होगा। मोटे तौर पर, संख्या दो भागों में विभाजित है: 0032/0064 । इस तरह के एक विशिष्ट कार्यान्वयन विधि को किया जाना था क्योंकि adj पैरामीटर में अधिकतम 8 पैरामीटर हो सकते हैं, बाकी को केवल अनदेखा किया जाता है। इसके बारे में आप आधिकारिक स्रोतों में प्रलेखन पढ़ सकते हैं।

10000 से नीचे मान वाले पहले चार पैरामीटर इंगित करते हैं:
LeftTopXY, RightTopXY, RightBottomXY, LeftBottomXY
10000 और इसके बाद के संस्करण के मूल्य के साथ संकेत मिलता है:
LeftTopX/LeftTopY, RightTopX/RightTopY, RightBottomX/RightBottomY, LeftBottomX/LeftBottomY

दूसरा चार सीमाओं की मोटाई को दर्शाता है:
Top, Right, Bottom, Left

जैसा कि आप देख सकते हैं, यहां कुछ भी जटिल नहीं है, केवल एक चीज अगर आप दूसरे चार मापदंडों को निर्दिष्ट नहीं करते हैं, तो रंग भराव पूरी तरह से पूरे फ्रेम को भर देगा, यदि कम से कम एक पैरामीटर निर्दिष्ट किया गया है, तो भरण सीमाओं पर कार्य करेगा, और पृष्ठभूमि पारदर्शी होगी।

समस्या भागों

इस समाधान में समस्याग्रस्त हिस्सा रबर ब्लॉक है, समस्या का सार यह है कि Microsoft ने इंटरनेट एक्सप्लोरर 8 को वीएमएल तत्वों को एचटीएमएल ब्लॉकों में फिट करने की संभावना में कटौती करके जारी किया, ब्राउज़र के पुराने संस्करणों में यह विधि ठीक काम करती है:

 <span style="position: relative; display: inline-block; padding: 20px;"> <v:shape adj="16,16,16,16" fillcolor="#00ff00" style="z-index: -1; position: absolute;" type="#vml-radius" /> test text </span>

अर्थात्, उदाहरण के लिए, IE7 मूल बॉक्स द्वारा हमारे बॉक्स को काफी सामान्य रूप से अनुकूलित करेगा। लेकिन IE8 में यह दृष्टिकोण काम नहीं करेगा।

तुम क्या पूछते हो ?! बेशक, जावास्क्रिप्ट में ऐसा करने का एक तरीका है, मूल ब्लॉक पर onresize घटना को onresize और जब यह ब्लॉक बदल जाए तो हमारे बॉक्स का आकार बदल दें। लेकिन यह इस तथ्य को जन्म देगा कि जब आप पृष्ठ को पहले लोड करते हैं, तो हमें सभी तत्वों पर जाने की आवश्यकता होगी, प्रारंभिक आकार सेट करें, घटना को लटकाएं। यह सब सुनसान है और यह जावास्क्रिप्ट है, और फिर भी हम इन उद्देश्यों के लिए जावास्क्रिप्ट का उपयोग नहीं करने के लिए सब कुछ कर रहे हैं।

हमारे आनंद के लिए, Microsoft ने इस अवसर में हमें पूरी तरह से काट नहीं दिया और मूल HTML ब्लॉक से एक VML तत्व स्थिति छोड़ दी। हालांकि यह तत्व बहुत सुविधाजनक नहीं है, लेकिन यह एक समस्या की स्थिति से बाहर निकलना संभव बनाता है। इस आइटम को V:VMLFRAME कहा जाता है। यह IFRAME जैसा कुछ है लेकिन एक वेक्टर के लिए।

VMLFRAME या एक और बैसाखी

इस टैग का उपयोग करने के लिए, आपको हमारे सूत्र को एक अलग फ़ाइल में ले जाना होगा, वहां हमारा वर्ग बनाना होगा। वह उसके लिए नियम है, और फिर उसका उपयोग करें। और इसलिए, चलिए शुरू करते हैं, नाम के साथ एक फाइल बनाते हैं, जो सामग्री के साथ internalvml.vml कहते हैं:

Internalvml.vml की सामग्री

 <xml xmlns:v="urn:schemas-microsoft-com:vml"> <v:shapetype id="vml-radius" adj="0,0,0,0" coordorigin="-1 -1" coordsize="1000000 1000000" path="m,@9qy@8,l@15,qx@0,@16l@0,@24qy@22,@1l@29,@1qx,@31l,@9xm@44,@54qy@49,@36 l@60,@36qx@39,@65l@39,@77qy@71,@42l@82,@42qx@44,@88l@44,@54xe" stroked="false"> <v:formulas> <v:f eqn="val width"/><v:f eqn="val height"/><v:f eqn="prod @0 1 pixelwidth"/> <v:f eqn="prod @1 1 pixelheight"/><v:f eqn="prod #0 1 10000"/><v:f eqn="prod @4 10000 1"/> <v:f eqn="sum #0 0 @5"/><v:f eqn="if @4 @4 @6"/><v:f eqn="prod @7 @2 1"/> <v:f eqn="prod @6 @3 1"/><v:f eqn="prod #1 1 10000"/><v:f eqn="prod @10 10000 1"/> <v:f eqn="sum #1 0 @11"/><v:f eqn="if @10 @10 @12"/><v:f eqn="sum pixelwidth 0 @13"/> <v:f eqn="prod @14 @2 1"/><v:f eqn="prod @12 @3 1"/><v:f eqn="prod #2 1 10000"/> <v:f eqn="prod @17 10000 1"/><v:f eqn="sum #2 0 @18"/><v:f eqn="if @17 @17 @19"/> <v:f eqn="sum pixelwidth 0 @20"/><v:f eqn="prod @21 @2 1"/><v:f eqn="sum pixelheight 0 @19"/> <v:f eqn="prod @23 @3 1"/><v:f eqn="prod #3 1 10000"/><v:f eqn="prod @25 10000 1"/> <v:f eqn="sum #3 0 @26"/><v:f eqn="if @25 @25 @27"/><v:f eqn="prod @28 @2 1"/> <v:f eqn="sum pixelheight 0 @27"/><v:f eqn="prod @30 @3 1"/><v:f eqn="sum #4 #6 0"/> <v:f eqn="sum #5 #7 0"/><v:f eqn="sum @32 @33 0"/><v:f eqn="prod #4 @3 1"/> <v:f eqn="if @34 @35 @9"/><v:f eqn="prod #5 @2 1"/><v:f eqn="sum @0 0 @37"/> <v:f eqn="if @34 @38 0"/><v:f eqn="prod #6 @3 1"/><v:f eqn="sum @1 0 @40"/> <v:f eqn="if @34 @41 @9"/><v:f eqn="prod #7 @2 1"/><v:f eqn="if @34 @43 0"/> <v:f eqn="sum @7 0 #7"/><v:f eqn="if @45 @45 0"/><v:f eqn="prod @46 @2 1"/> <v:f eqn="sum @47 @43 0"/><v:f eqn="if @34 @48 0"/><v:f eqn="sum @6 0 #4"/> <v:f eqn="if @50 @50 0"/><v:f eqn="prod @51 @3 1"/><v:f eqn="sum @52 @35 0"/> <v:f eqn="if @34 @53 @9"/><v:f eqn="sum @13 0 #5"/><v:f eqn="if @55 @55 0"/> <v:f eqn="sum pixelwidth 0 @56"/><v:f eqn="prod @57 @2 1"/><v:f eqn="sum @58 0 @37"/> <v:f eqn="if @34 @59 0"/><v:f eqn="sum @12 0 #4"/><v:f eqn="if @61 @61 0"/> <v:f eqn="prod @62 @3 1"/><v:f eqn="sum @63 @35 0"/><v:f eqn="if @34 @64 @9"/> <v:f eqn="sum @20 0 #5"/><v:f eqn="if @66 @66 0"/><v:f eqn="sum pixelwidth 0 @67"/> <v:f eqn="prod @68 @2 1"/><v:f eqn="sum @69 0 @37"/><v:f eqn="if @34 @70 0"/> <v:f eqn="sum @19 0 #6"/><v:f eqn="if @72 @72 0"/><v:f eqn="sum pixelheight 0 @73"/> <v:f eqn="prod @74 @3 1"/><v:f eqn="sum @75 0 @40"/><v:f eqn="if @34 @76 @9"/> <v:f eqn="sum @28 0 #7"/><v:f eqn="if @78 @78 0"/><v:f eqn="prod @79 @2 1"/> <v:f eqn="sum @80 @43 0"/><v:f eqn="if @34 @81 0"/><v:f eqn="sum @27 0 #6"/> <v:f eqn="if @83 @83 0"/><v:f eqn="sum pixelheight 0 @84"/><v:f eqn="prod @85 @3 1"/> <v:f eqn="sum @86 0 @40"/><v:f eqn="if @34 @87 @9"/> </v:formulas> </v:shapetype> <v:shape id="my-round" adj="16,16,16,16" fillcolor="#00ff00" style="width: 100%; height: 100%;" type="#vml-radius" /> </xml>

हमने अपना बॉक्स फाइल में डाला:

 <v:shape id="my-round" adj="16,16,16,16" fillcolor="#00ff00" style="width: 100%; height: 100%;" type="#vml-radius" />

उसे my-round नाम की एक ID जोड़कर, ताकि बाद में इस नाम पर IE यह निर्धारित कर सके कि हम किस वर्ग का उपयोग करना चाहते हैं।

और अब आप सुरक्षित रूप से हमारे वर्ग को v:vmlframe माध्यम से हमारे वर्ग से बना सकते हैं:

 <span style="position: relative; display: inline-block; padding: 20px;"> <v:vmlframe style="z-index: -1; position: absolute;" src="internalvml.vml#my-round" /> test text </span>

अब Internet Explorer 8 सामान्य रूप से हमारे बॉक्स को पैरेंट ब्लॉक के आकार में फिट करेगा।

निष्कर्ष

अंत में, मैं यह कहना चाहता हूं कि यदि आपके लिए कुछ स्पष्ट नहीं है या आप कुछ जोड़ना चाहते हैं, तो टिप्पणियों में लिखें और मैं लेख को पूरक / सही करूंगा। मैं लेख लिखने में विशेषज्ञ नहीं हूँ, यह कोड के लिए मेरा है, लेकिन लेख लिखना मेरे लिए बहुत अच्छा नहीं है। इसलिए, मुझे दोष मत दो, मैंने कोशिश की)))

सभी को शुभकामनाएँ और अच्छी गोलाई!

जावास्क्रिप्ट के बिना इंटरनेट एक्सप्लोरर 6,7,8 में किसी भी प्रकार के गोल कोनों को बनाने का सबसे आसान तरीका