2013-02-27 169 views
18

मैंने सीएसएस फ़ंक्शन कैल्क() और इसके कमाल के बारे में सीखा। मैंने इसका उपयोग करने की कोशिश की:सीएसएस कैल्क() फ़ंक्शन मेरे लिए क्यों काम नहीं करता है?

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

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

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

+4

[यह संगत तालिका] देखें (http://caniuse.com/#feat=calc)। – Passerby

उत्तर

5

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

+0

आधुनिकता के साथ आप यह जांच सकते हैं कि ब्राउज़र इस सुविधा का समर्थन करता है और यदि यह जावास्क्रिप्ट या किसी अन्य शैली में फ़ॉलबैक नहीं करता है http://modernizr.com/ –

+0

क्या यह सिर्फ मुझे है या कैनियस पर उपसर्ग का उपयोग करने के लिए उल्लेख करना भूल जाता है पृष्ठ? – csilk

43

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

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

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

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

1

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

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

और अपने जावास्क्रिप्ट में

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

BTW (मैं jQuery यहाँ उपयोग कर रहा हूँ)। आईडी के बजाए कक्षा के नामों के साथ अपने तत्वों को स्टाइल करना बेहतर है। किसी तत्व की आईडी का उपयोग केवल जावास्क्रिप्ट के माध्यम से लक्षित करने के लिए किया जाना चाहिए।

+0

सफारी v5.1.7 में सीएसएस चौड़ाई कैल्क से निपटने के लिए महान जवाब :)) – ss888

17

Android के मूल ब्राउज़र समर्थन को छोड़कर सभी आधुनिक ब्राउज़र 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 **/ 
0

यह दोनों सही है कि IE9 सीएसएस calc() और है कि आप calc में एक ऋण के साथ स्पेस डाल करने के लिए है का समर्थन करता है है।

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

4

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

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

1

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

0

सबसे पहले, + या - से पहले और बाद में रिक्त स्थान होना चाहिए। आप *, / का भी उपयोग कर सकते हैं, और उन्हें गठबंधन कर सकते हैं। उदाहरण देखें:

.gen { 
 
    height: 100px; 
 
    background-color: blue; 
 
    border: solid 1px black; 
 
} 
 

 
.nocalc { 
 
    width: 50%; 
 
} 
 

 
.calc { 
 
    width: calc(100%/4 * 2 + 50px - 40px); 
 
    /* 50% + 10px */ 
 
}
<div class="gen nocalc"></div> 
 
<div class="gen calc"></div>

यह display: table साथ काम करता है, लेकिन यह display: table-row साथ काम नहीं करता है (पंक्ति पूरे अंतरिक्ष लेता है) और display: table-cell अगर (एक सेल लेता साथ काम नहीं करता पूरी जगह; यदि कई - प्रत्येक सेल अपनी सामग्री के अनुसार स्थान लेता है)।

.cont-1 { 
 
    background-color: yellow; 
 
} 
 

 
.cont-2 { 
 
background-color: red; 
 
border: solid 1px black; 
 
} 
 

 
.width-m-50 { 
 
    width: calc(100% - 20px); 
 
    height: 100px; 
 
} 
 

 
.tab-simple { 
 
    display: table; 
 
} 
 

 
.tab { 
 
    display: table; 
 
    border: solid 1px black; 
 
    background-color: yellow; 
 
    width: 100%; 
 
} 
 

 
.tab-row { 
 
    display: table-row; 
 
} 
 

 
.tab-cell { 
 
    display: table-cell; 
 
}
<div class="cont-1"> 
 
    <div class="cont-2 width-m-50"> 
 
    div with width: calc(100% - 20px); 
 
    </div> 
 
</div> 
 

 
<div class="cont-1"> 
 
    <div class="cont-2 tab-simple width-m-50"> 
 
    tab with width: calc(100% - 20px); 
 
    </div> 
 
</div> 
 
<h3> tab with width 100% and two cells, 1-st with width calc(100% - 20px); 2-nd without: </h3> 
 
<div class="tab"> 
 
    <div class="tab-row"> 
 
     <div class="cont-2 tab-cell width-m-50"> 
 
     cell 
 
     </div> 
 
     <div class="cont-2 tab-cell"> 
 
     cell 
 
     </div> 
 
    </div> 
 
</div>

0

आदेश में अपने कार्य के लिए आप ऑपरेटर संकेत के बीच रिक्त स्थान की आवश्यकता है काम करने के लिए।

उदाहरण के लिए:

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

calc() article मुद्दे का एक और विस्तृत विवरण प्रदान करता है।