9
<div id="outerDiv">
<div id="innerDiv"></div>
<div id="remainderDiv"></div>
</div>
#outerDiv, #innerDiv, #remainderDiv{
height: 100px;
}
#outerDiv{
width: 55.5px;
z-index: 1;
background-color: red;
}
#innerDiv{
width: calc(100% - 10px);
z-index: 100;
background-color: blue;
float: left;
}
#remainderDiv{
width: 10px;
z-index: 100;
background-color: green;
float: left;
}
http://jsfiddle.net/yz8cwj3a/क्रोम 37 calc गोलाई
परिणाम: http://i.imgur.com/DYor2yb.png
इस बेला calc का उपयोग क्रोम 37. के साथ एक समस्या (100% - 10px) से पता चलता दशमलव पिक्सल के साथ एक तत्व पर समारोह, यह हमेशा नीचे दौर यह अजीब बातों का कारण बनता है।
उदाहरण में, बाहरी div की चौड़ाई 50.5px है। दो आंतरिक divs में कैल्क (100% - 10px) और 10px चौड़ाई के रूप में होता है। हालांकि यह कुल 50.5 होना चाहिए, फिर भी यह लाल पृष्ठभूमि दिखाता है।
समस्या क्रोम 37 में पेश की जाने वाली प्रतीत होती है। क्या किसी को पता है कि इस मुद्दे की पहले ही रिपोर्ट हो चुकी है और/या यदि इसे हल किया जाएगा?
संपादित करें: मैं टिप्पणियों से समझता हूं कि समस्या लंबे समय से पहले से मौजूद है। क्या यह ठीक करने के लिए कोई (क्रॉस-ब्राउजर) साफ तरीका है?
यह समस्या क्रोम में मौजूद रहे हैं के बाद से calc लागू किया गया था (http://app.crossbrowsertesting.com/public/i4fc93605bfe96a0/screenshots/zc4fbbf828e8096be866?size [कुछ समय संस्करण 23 और 26. के बीच] लगता है = छोटा और प्रकार = खिड़की और browser_type = क्रोम) अब तक क्रोम के हर संस्करण में यह एक समस्या है। – misterManSam
यह समस्या केवल 'पीएक्स' इकाइयों तक ही सीमित नहीं है। [यहां 'em'] के साथ एक ही समस्या है (http://jsfiddle.net/cps5b1vy/)। ([यह पीएक्स से एम इकाइयों की गणना करने का आलसी तरीका है] (http://pxtoem.com/)) – misterManSam
** आधा पिक्सेल ** कैसा दिखता है? –