सीमा-छवि: आईई

Question

के लिए वर्कअराउंड क्या आईई के लिए कोई कामकाज है जो मुझे border-image का उपयोग करने में सक्षम बनाता है? मैं एक साइट विकसित कर रहा हूं और यह हर ब्राउज़र में ठीक से काम कर रहा है लेकिन आईई। मैं इन सलाखों

मैं ie-css3.htc हैक इस्तेमाल कर सकते हैं की नकल करने की जरूरत है लेकिन border-radius एक साथ चारों कोनों के साथ ही काम करता है (जो यहाँ लागू नहीं होता है, क्योंकि शीर्ष सीमा गोल नहीं कर रहा है) और filter सीएसएस संपत्ति (ढाल के लिए) border-radius के साथ बिल्कुल काम नहीं करता है (यह सीमा त्रिज्या सीमाओं को अनदेखा कर पूरे तत्व को भरता है)। यदि इसके लिए कोई कामकाज नहीं है, तो ऐसा करने का सबसे अच्छा तरीका कैसे होगा?

Answer 1

.png फ़ाइलें अनावश्यक हैं। बस CSS3 पाई का उपयोग करें: http://css3pie.com/

मालिकाना आईई फ़िल्टर पूरी तरह से छुटकारा पाएं, और इसके बजाय (हे, मालिकाना) -pie-background:linear-gradient(values) का उपयोग करें।

सौहार्दपूर्वक व्यक्तिगत रूप से गोलाकार कोनों के साथ काम करता है: border-radius: 0 5px 5px 5px

उस मामले में, ऊपरी-बाएं कोने कोई बॉर्डर-त्रिज्या होगा, और अन्य कोनों (दक्षिणावर्त) 5px प्रत्येक पर होगा।

फिर उसी शैली में behavior:url(path_to/pie.htc); का उपयोग करें।

यह भी याद रखें कि पथ_to दस्तावेज के सापेक्ष है, सीएसएस फ़ाइल जो इसे कॉल करता है। यह जांचना सुनिश्चित करें कि अगर यह बल्ले से ठीक काम नहीं करता है।

मैंने इस बार कई बार परीक्षण किया है और यह एक आकर्षण की तरह काम करता है।

अतिरिक्त जानकारी:

कभी कभी अपने स्टाइल प्रकट होता है और गायब हो जाती है, तो आपके तत्व एक position:relative और एक निर्दिष्ट z-index देने का प्रयास करें। जिस तरह से CSS3 पीआईई काम करता है, यह जेड-इंडेक्स के साथ खेलता है और निर्दिष्ट नहीं होने पर आपके स्टाइल वाले ग्रेडियेंट (और गोलाकार कोनों, इत्यादि) पृष्ठभूमि के नीचे दिखाई दे सकता है, खासकर यदि आप नकारात्मक मार्जिन या उस तरह के अजीब कुछ का उपयोग करते हैं।

Answer 2

नहीं, लेकिन यानी- css3.htc चीज एकमात्र संभव काम हो सकती है यदि मैं वही सोच रहा हूं। या क्या कोई और जेएस स्क्रिप्ट मैं सोच रहा हूं कि इसे हल किया गया है? याद नहीं है

Answer 3

आपके कोनों या किनारों की छवियों को बनाने का एकमात्र असली समाधान हो सकता है। ऐसा लगता है कि सबकुछ एक ही आकार का है, बस एक विस्तार योग्य चौड़ाई है। तो यह लोड के लिए लगभग कोई अंतराल समय के साथ कोड के लिए शायद ही कभी आसान होना चाहिए।

यही कारण है कि मैं उपलब्ध साबित होने की अवधारणा को चिपकाता हूं। मतलब, यदि आपका लक्षित बाजार IE7 + का उपयोग कर रहा है तो आपको डिज़ाइनिंग और प्रोग्रामिंग के दौरान सचेत होना चाहिए, इसलिए आप इस तरह की छोटी समस्याओं में भाग नहीं लेते हैं।

यह सब CSS3 और HTML5 अद्भुत चीजें हैं, लेकिन डेवलपर्स के रूप में, हम अभी भी जो कुछ देखते हैं उस तक ही सीमित हैं। यदि आप सभी उपयोगकर्ताओं के लिए भी एक खेल मैदान बनाना चाहते हैं, तो आप नए कोडिंग प्रथाओं पर भरोसा कर सकते हैं जब तक आप सभी ब्राउज़रों में बोर्ड में सीमा-त्रिज्या जैसी चीजें नहीं कर सकते।

फ्लिप पक्ष पर, आप शायद आईई उपयोगकर्ताओं को देखने के बारे में परवाह नहीं कर सकते हैं; इसलिए आप अन्य ब्राउज़रों का उपयोग करने वाले लोगों के लिए ब्राउज़र वृद्धि के रूप में अलग-अलग शैली प्राप्त कर सकते हैं।

Answer 4

उचित 4 कोने कटआउट के साथ उस लाल ढाल की वास्तव में विस्तृत छवि लें, इसे एक छवि के रूप में सहेजें (कोनों पर पारदर्शी पीएनजी क्योंकि आप आईई 6 का समर्थन नहीं कर रहे हैं)।

उन हैडर क्षेत्रों में से प्रत्येक के लिए आप इतना की तरह लपेट होगा:

<div class="outer"><div class="inner">ENQUETE</div></div> 

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

.outer { 
    background: transparent url(redgradient.png) no-repeat 0px 0px; 
    margin: 0 10px 0 0; 
} 
.inner { 
    background: transparent url(redgradient.png) no-repeat 100% 0px; 
    position: relative; 
    left: 10px; 
} 

Answer 5

सटीक एक ही समस्या को दबाएं और आईसी < = 9 को सशर्त टिप्पणियों के माध्यम से गिरावट के माध्यम से दिया। हालांकि, यह समाधान अब नवीनतम आईई 10 prev4 के साथ टूट गया है जो अभी भी सीमा-छवि का समर्थन नहीं कर रहा है और आईई सशर्त टिप्पणियों का समर्थन नहीं करता है। ड्राइंग बोर्ड पर वापस ...

समाधान पर काम करना हमें वास्तव में उपयोग करना चाहिए: सुविधा परीक्षण।

मॉडर्निजर का उपयोग करना जो एचटीएमएल टैग में CSS3 वर्ग नाम और सीमा-छवि के लिए परीक्षण (वेब ​​मानकों को काम करता है) या कोई सीमा-छवि (आईई उपयोगकर्ताओं को सर्वश्रेष्ठ प्रदान करता है जो आप कर सकते हैं लेकिन अनुपालन के समान अनुभव नहीं ब्राउज़र और एक आईई को केवल आपके पृष्ठ पर लिंक दिखाता है जो उन्हें बताता है कि बेहतर अनुभव कैसे प्राप्त करें: उदाहरण के लिए आईई ड्रॉप करें)।