दिलचस्प पोस्ट
कैसे WPF में pageload पर कॉम्बो बॉक्स में – डिफ़ॉल्ट पाठ "- टीम का चयन करें" प्रदर्शित करने के लिए? एचटीएमएल टैग की पूर्ण सूची जिसमें यूआरएल वैल्यू है? एक सीएसएस ब्लॉक के अंतिम सेमीकोलन को छोड़कर पेंडस में कार्टेसियन उत्पाद एसक्यूएल एनवीएचएआरएआर और वीएआरएआरएआर सीमाएं नकारात्मक मूल्यों के साथ मॉड्यूलो ऑपरेटर बाइट सरणी में परिवर्तित करें (जावा) System.currentTimeMillis () बनाम नई तारीख () बनाम कैलेंडर .get इंस्तांस ()। GetTime () क्रॉस ब्राउज़र जावास्क्रिप्ट (नहीं jQuery …) शीर्ष एनीमेशन पर स्क्रॉल करें हाइपरलिंक क्लिक करने पर फ़ायरिंग से पैरेंट कंटेनर क्लिक इवेंट को रोकें अंगुलुज – सरल रूप जमा करें ! जावास्क्रिप्ट में पूर्ववर्ती समारोह? JVM की डिफ़ॉल्ट एन्कोडिंग क्या है? एक मॉडल के लिए एक एमवीसी 3 रेडियॉबटन बाइंड करने का सही तरीका क्या स्ट्र्रेव () फ़ंक्शन लिनक्स में उपलब्ध नहीं है?

क्यों सीएसएस calc () समारोह मेरे लिए काम नहीं करता है?

मैं सीएसएस फ़ंक्शन calc () और इसके अद्भुत के बारे में सीखा है मैंने इसे प्रयोग करने की कोशिश की:

#abc{width:calc(100%-20px)} 

लेकिन इस फ़ंक्शन के साथ समस्या यह है कि यह काम नहीं करता है मैंने यह कोड IE9 और सफारी का परीक्षण किया और यह काम नहीं करता

यह काम क्यों नहीं करता है?

Solutions Collecting From Web of "क्यों सीएसएस calc () समारोह मेरे लिए काम नहीं करता है?"

ऑपरेटर "-" रिक्त स्थान से घिरा होना चाहिए:

 #abc{width:calc(100% - 20px)} 

calc() पर एमडीएन सूचना का हवाला देते हुए: "नोट: + और – ऑपरेटर हमेशा सफेद स्थान से घिरे रहते हैं। उदाहरण के लिए कैल्श (50% -8 पीएक्स) के संचालन को एक नकारात्मक लंबाई, एक अवैध अभिव्यक्ति के बाद प्रतिशत के रूप में पार्स किया जाएगा, जबकि कैल्क का परिचालन (50% -8 पीएक्स) एक प्रतिशत है, इसके बाद शून्य चिह्न और लंबाई । "

इस पर औपचारिक विवरण सीएसएस मानों और यूनिट्स मॉड्यूल स्तर 3 सीआर के क्लॉज 8.1.1 में है।

एंड्रॉइड के मूल ब्राउज़र समर्थन calc() को छोड़कर सभी आधुनिक ब्राउज़र्स जो अपनाना आसान बनाता है लेकिन ध्यान दें कि असंगत ब्राउज़र पर आपके डिज़ाइन के परिणामस्वरूप लेआउट पर और उसके प्रभाव का एक बड़ा प्रभाव हो सकता है।

आपको इसे फ़ॉलबैक घोषणा के साथ उपयोग करना चाहिए, इसलिए यह उन ब्राउज़रों को नहीं तोड़ता है जो इसका समर्थन नहीं करते हैं।

 width: 500px; /** older browsers **/ width: -webkit-calc(50% - 20px); /** Safari 6, Chrome 19-25 **/ width: -moz-calc(50% - 20px); /** FF 4-15 **/ width: calc(50% - 20px); /** FF 16+, IE 9+, Opera 15, Chrome 26+, Safari 7 and future other browsers **/ 

यह IE9, IE10 और Safari 6.0 ( -webkit- उपसर्ग का उपयोग करके ) द्वारा समर्थित है। आप पूरी सहायता तालिका यहां देख सकते हैं: http://caniuse.com/#feat=calc

IE9 के calc() विधि का कार्यान्वयन उन तत्वों पर काम नहीं करता है जो कि display: table

आप इसके चारों ओर एक div लपेटकर इस पर काम कर सकते हैं (जो कि display: block ) और display: table की चौड़ाई बनाकर display: table तत्व width: 100% अंदर width: 100% आप आसपास के calc लिए calc डी चौड़ाई पर लागू होते हैं

Modernizr के नवीनतम संस्करण के साथ आप csscalc समर्थन देख सकते हैं। बस Modernizr.csscalc का उपयोग करें यदि यह समर्थित नहीं है, तो यह फ़ंक्शन सत्य वापस करेगा और गलत नहीं होगा। आपके मामले में आपके पास यह आपके सीएसएस में होगा:

 #abc { width:calc(100% - 20px); } 

और आपकी जावास्क्रिप्ट में (मैं यहां jQuery का उपयोग कर रहा हूं)

 if(!Modernizr.csscalc){ $('#abc').width($(PARENT_EL).width() - 20) } 

Btw। आईडी के बजाए कक्षा के नामों के साथ अपने तत्वों को शैली बनाना बेहतर है किसी तत्व का आईडी केवल जावास्क्रिप्ट के माध्यम से लक्षित करने के लिए इस्तेमाल किया जाना चाहिए।

आपको रिक्त स्थान की आवश्यकता होती है और यदि आप प्रीकॉक्सेर प्रारूप का उपयोग करते हैं तो यह calc(~"100% - 20px") या यह काम नहीं कर सकता

यह दोनों सही है कि IE9 सीएसएस कैल्क () का समर्थन करता है और आपको कैस में शून्य से लगभग रिक्त स्थान देना होगा।

यद्यपि यह जानकर कि मुझे IE9 के साथ एक समान समस्या थी, जहां width: 50% width: calc(50%) से भिन्न परिणाम width: calc(50%) । यह पता चला कि इसमें display प्रकार के साथ क्या करना था जो कि inline-table सेट किया गया था इसे inline-block करने के लिए बदल दिया गया calc() फिर से कार्य करें ध्यान दें कि http://caniuse.com/#feat=calc IE9 के calc() समर्थन को "आंशिक" के रूप में दर्शाता है