दिलचस्प पोस्ट
Google मानचित्र छवि? VbScript और निर्गम के साथ चुपचाप कमांड लाइन चल रहा है? स्ट्रिंग के माध्यम से c # गतिशील प्रॉपर्टी का मूल्य प्राप्त करें PHP के साथ काम कर रहे जावा एचटीटीपी क्लाइंट लाइब्रेरी का उपयोग कर एक फाइल कैसे अपलोड करें जावास्क्रिप्ट में सरणी चौराहे के लिए सबसे सरल कोड जावास्क्रिप्ट का उपयोग कर मैं कैसे प्रारूपों को प्रारूपित करूं? SSL कनेक्शन स्थापित करने में असमर्थ, मैं अपने एसएसएल प्रमाणपत्र को कैसे तय करूं? जांच कैसे करें कि क्या क्लिक ईवेंट पहले ही बाध्य है – JQuery इनपुट प्रकार = "फ़ाइल" पर कर्सर प्रकार बदलें SendInput और 64bits पायथन में कीबोर्ड इवेंट कैसे उत्पन्न करें? एक्लिप्स लॉगकैट व्यूअर में टैगनाम को कैसे फ़िल्टर करें एंड्रॉइड में बटन क्लिक करें एक शब्द को एक सूची में विभाजित करने के लिए अजगर में कोई फ़ंक्शन है? बूल ऑपरेटर ++ और –

CSS फ्लेक्सबॉक्स IE10 में काम नहीं कर रहा है

IE10 में, यह कोड सही तरीके से काम नहीं कर रहा है:

.flexbox form { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-flex-direction: row; -moz-flex-direction: row; -ms-flex-direction: row; -o-flex-direction: row; flex-direction: row; } .flexbox form input[type=submit] { width: 31px; } .flexbox form input[type=text] { width: auto; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-flex: auto 1; -moz-flex: auto 1; -ms-flex: auto 1; -o-flex: auto 1; flex: auto 1; } 

क्या होना चाहिए यह है कि input[type=submit] को 31px चौड़ा होना चाहिए, input[type=text] साथ input[type=text] उपलब्ध स्थान के बाकी हिस्सों के आकार में क्या होता है input[type=text] किसी कारण के लिए 263px पर डिफ़ॉल्ट होता है

यह Chrome और Firefox में ठीक काम करता है

Solutions Collecting From Web of "CSS फ्लेक्सबॉक्स IE10 में काम नहीं कर रहा है"

फ्लेक्स लेआउट मोड (पूरी तरह से) IE में अभी तक समर्थित नहीं हैं। IE10 युक्ति का "ट्विल" संस्करण लागू करता है जो पूरी तरह से हालिया नहीं है, लेकिन फिर भी काम करता है।

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes

इस सीएसएस-ट्रिक्स लेख में फ्लेक्सबॉक्स के क्रॉस-ब्राउज़र उपयोग (आईई सहित) पर कुछ सलाह है: http://css-tricks.com/using-flexbox/

संपादित करें: थोड़ी अधिक शोध के बाद, आईई 10 फ्लेक्सबॉक्स लेआउट मोड को मार्च 2012 डब्लू 3 सी के मसौदा के विषय में लागू किया गया है: http://www.w3.org/TR/2012/WD-css3-flexbox-20120322/

सबसे मौजूदा मसौदा एक साल या उससे भी ज्यादा समय है: http://dev.w3.org/csswg/css-flexbox/

एन्नूई के रूप में उल्लिखित, आईई 10 -ms के -ms प्रीफिक्स्ड वर्जन का समर्थन करता है (IE 11 इसे अप्रूफिक्स का समर्थन करता है) मैं आपके कोड में देख सकता हूं:

  • आपको display: -ms-flexbox होना चाहिए display: -ms-flexbox बजाय display: -ms-flexbox display: -ms-flex
  • मुझे लगता है कि आपको flex जैसे सभी 3 flex मूल्यों को निर्दिष्ट करना चाहिए flex: 0 1 auto अस्पष्टता से बचने के लिए flex: 0 1 auto

तो अंतिम अद्यतन कोड है …

 .flexbox form { display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: -o-flex; display: flex; /* Direction defaults to 'row', so not really necessary to specify */ -webkit-flex-direction: row; -moz-flex-direction: row; -ms-flex-direction: row; -o-flex-direction: row; flex-direction: row; } .flexbox form input[type=submit] { width: 31px; } .flexbox form input[type=text] { width: auto; /* Flex should have 3 values which is shorthand for <flex-grow> <flex-shrink> <flex-basis> */ -webkit-flex: 1 1 auto; -moz-flex: 1 1 auto; -ms-flex: 1 1 auto; -o-flex: 1 1 auto; flex: 1 1 auto; /* I don't think you need 'display: flex' on child elements * / display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; /**/ } 

IE10 ने पुराने वाक्यविन्यास का उपयोग किया है। इसलिए:

 display: -ms-flexbox; /* will work on IE10 */ display: flex; /* is new syntax, will not work on IE10 */ 

css-tricks.com/snippets/css/a-guide-to-flexbox देखें:

(ट्वीनर) का अर्थ है [2012] से एक अजीब अनौपचारिक वाक्यविन्यास (उदाहरण के लिए: फ्लेक्सबॉक्स;)

कृपया ध्यान दें कि फ्लेक्स आइटम प्रदर्शित होना चाहिए: ब्लॉक; IE10 में