फ्लेक्सबॉक्स और इंटरनेट एक्सप्लोरर 11 (प्रदर्शन: फ्लेक्स में <html>?)

117

मैं "फ्लोटी" लेआउट से दूर जाने और भविष्य की परियोजनाओं के लिए सीएसएस फ्लेक्सबॉक्स का उपयोग करने की योजना बना रहा हूं। मुझे यह देखकर खुशी हुई कि उनके वर्तमान संस्करणों के सभी प्रमुख ब्राउज़र एक तरह से (दूसरे तरीके से) फ्लेक्सबॉक्स का समर्थन करते दिख रहे हैं।

मैं कुछ उदाहरणों को देखने के लिए "फ्लेक्सबॉक्स द्वारा हल" पर चला गया । हालांकि "स्टिकी पाद" उदाहरण के इंटरनेट एक्सप्लोरर 11. मैं में काम करने के लिए प्रतीत नहीं होता है थोड़ा के आसपास खेला और काम में जोड़कर मिल display:flexकरने के लिए <html>और width:100%करने के लिए<body>

तो मेरा पहला सवाल है: क्या कोई मुझे उस तर्क को समझा सकता है? मैं बस के आसपास चक्कर लगाया और यह काम किया है, लेकिन मैं काफी समझ में नहीं आता कि यह इस तरह से क्यों काम किया ...

फिर "मीडिया ऑब्जेक्ट" उदाहरण है जो इसके अलावा सभी ब्राउज़रों में काम करता है - आपने अनुमान लगाया - इंटरनेट एक्सप्लोरर। मैं उस के साथ आसपास भी था, लेकिन बिना किसी सफलता के।

मेरा दूसरा प्रश्न इसलिए है: क्या इंटरनेट एक्सप्लोरर में "मीडिया ऑब्जेक्ट" उदाहरण प्राप्त करने की "स्वच्छ" संभावना है?

— Kodekan
स्रोत

1

इस पुराने प्रश्न के लिए एक अद्यतन: जुड़ा डेमो IE11 पर ठीक काम करता है। यह पूछे जाने के बाद से 3 वर्षों में एक बग निश्चित होना चाहिए।

— डेरिल

151

Http://caniuse.com/#feat=flexbox के अनुसार :

सितंबर 2013 के मसौदे के अनुसार, IE10 और IE11 के लिए डिफ़ॉल्ट मान flexइसके 0 0 autoबजाय हैं 0 1 auto, "

तो सीधे शब्दों में, यदि आपके सीएसएस में कहीं आपके पास कुछ ऐसा है: तो यह flex:1सभी ब्राउज़रों में उसी तरह अनुवादित नहीं है। इसे बदलने की कोशिश करें 1 0 0और मुझे विश्वास है कि आप तुरंत देख लेंगे कि यह काम करता है।

समस्या यह है कि यह समाधान संभवतः फ़ायरफ़ॉक्स को गड़बड़ कर देगा, लेकिन फिर आप केवल मोज़िला को लक्षित करने के लिए कुछ हैक का उपयोग कर सकते हैं और इसे वापस बदल सकते हैं:

@-moz-document url-prefix() {
 #flexible-content{
      flex: 1;
    }
}

चूंकि flexboxW3C कैंडिडेट है और आधिकारिक नहीं है, इसलिए ब्राउज़र अलग-अलग परिणाम देते हैं, लेकिन मुझे लगता है कि यह तत्काल भविष्य में बदल जाएगा।

अगर किसी के पास बेहतर जवाब है तो मैं जानना चाहूंगा!

— Odisseas
स्रोत

1

मुझे लगता है कि IE10 की जरूरत है -ms-flex: 1 0 0;और IE11 का मतलब है flex: 1 0 0;..?

— Eystein

19

Google Chrome 39 के साथ इसने अचानक मेरे लिए काम करना बंद कर दिया। मुझे ट्रैक करने के लिए उम्र ले लिया, लेकिन यह तीसरे अंक का विनिर्देश था। Chrome 39 का पालन नहीं करता है flex: 1 0 0;। लेकिन flex: 1 0 0%;( % पर ध्यान दें ) या काम करेगा। flex: 1 0 auto;

— Eystein

हाँ, यह सच है, इसने मेरे कुछ डिज़ाइन भी तोड़ दिए! मैंने इसे केवल इसे बदलकर तय किया है flex: 1;मुझे लगता है कि यह इस बात पर निर्भर करता है कि आप किस लिए जा रहे हैं, हालांकि ...

— ओडिसीस

1

IE11 के साथ मुख्य मुद्दा यह गणना करने का तरीका है flex-basis। गितुब की एक अच्छी चर्चा है कि flex:1 0 100%आईई 11 के लिए कुछ मामलों में काम क्यों करता है flex: 1 0 0%या flex: 1 0 autoदूसरों में भी काम करता है। आपको समय से पहले सामग्री को जानना होगा।

— पी। ब्रायन। मैके

से caniuse.com/#feat=flexbox , यह विशेष रूप से ज्ञात समस्याओं के तहत उल्लेख किया है कि IE 11 एक इकाई तीसरा तर्क में शामिल होना, फ्लेक्स-आधार संपत्ति .. की आवश्यकता है

— हेनरी नव

49

min-heightIE10 और IE11 में समस्या को ठीक करने के लिए किसी अन्य फ्लेक्स कंटेनर का उपयोग करें :

एचटीएमएल

<div class="ie-fixMinHeight">
    <div id="page">
        <div id="header"></div>
        <div id="content"></div>
        <div id="footer"></div>
    </div>
</div>

सीएसएस

.ie-fixMinHeight {
    display:flex;
}

#page {
    min-height:100vh;
    width:100%;
    display:flex;
    flex-direction:column;
}

#content {
    flex-grow:1;
}

एक कार्यशील डेमो देखें ।

सीधे फ्लेक्सबॉक्स लेआउट का उपयोग न करें bodyक्योंकि यह jQuery प्लगइन्स (स्वतः पूर्ण, पॉपअप, आदि) के माध्यम से डाले गए तत्वों को स्क्रू करता है।
अपने कंटेनर पर उपयोग न करें height:100%या न करें height:100vhक्योंकि पाद खिड़की के निचले भाग पर चिपक जाएगा और लंबी सामग्री के लिए अनुकूल नहीं होगा।
का प्रयोग करें flex-grow:1बजाय flex:1के लिए IE10 और IE11 मूलभूत मूल्यों कारण flexहैं 0 0 autoऔर नहीं 0 1 auto।

— BeliG
स्रोत

3

मैंने पाया कि मैं जोड़ने के लिए किया था flex-direction: columnके लिए .ie-fixMinHeightदुष्प्रभाव से बचने के लिए। यदि आपके पास IE विशिष्ट HTML नहीं है तो आप उपयोग कर सकते हैं.fixMinHeight { display: -ms-flexbox; -ms-flex-direction: column; }

— मार्क होर्गन

मुझे पता है कि यह 2 साल पुराना है, लेकिन धन्यवाद! मैं इस stackoverflow.com/a/24979148/359157 का अनुसरण कर रहा था और हमेशा यह जानने की कोशिश कर रहा था कि एज और क्रोम ने त्रुटिपूर्ण तरीके से काम किया है या नहीं। heightबनाम min-heightमहत्वपूर्ण था।

— टाइकोब

39

आपको बस जरूरत है flex:1; यह IE11 के लिए समस्या को ठीक करेगा। मैं दूसरा ओडिसीस। इसके अतिरिक्त HTML, बॉडी एलिमेंट्स को 100% ऊंचाई प्रदान करते हैं ।

सीएसएस परिवर्तन:

html, body{
    height:100%;
}
body {
    border: red 1px solid;
    min-height: 100vh;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
}
header {
    background: #23bcfc;
}
main {
    background: #87ccfc;
    -ms-flex: 1;
    -webkit-flex: 1;
    flex: 1;
}
footer {
    background: #dd55dd;
}

काम कर रहे url: http://jsfiddle.net/3tpuryso/13/

— अशोक कुमार गुप्ता
स्रोत

क्या आप इस मुद्दे के बारे में अधिक बता सकते हैं: क्या IE में काम करने वाले "मीडिया ऑब्जेक्ट" उदाहरण को प्राप्त करने के लिए "स्वच्छ" संभावना है?

— अशोक कुमार गुप्ता

1

यह मेरे लिए काम करता है। एक बात मैं (क्योंकि यह मुझे बाहर पकड़ा) में पाया गया कि अगर आप एक से युक्त तत्व है, है display: flex;और संबद्ध शैलियों को लागू किया जाना चाहिए दोनोंbody और कंटेनर: jsfiddle.net/Skateside/nezdrrkr

— जेम्स लांग

HTML की ऊँचाई को 100% पर सेट करने से प्रतीत होता है कि कंटेंट की सामग्री mainठीक से बढ़ रही है (क्रोम में, कम से कम); यदि आप पर्याप्त सामग्री जोड़ते हैं तो यह पाद से आगे निकल जाएगा। jsfiddle.net/3tpuryso/65

— मूर्खता

@FoolishSeth जिस तरह से यह सही है अब आप मूल रूप से इसे 100% तक बढ़ने के लिए कह रहे हैं न कि पिक्सेल अधिक। आपको अपनी सामग्री के साथ पालन htmlकरने के लिए सेट करना चाहिएmin-height: 100%

— ओडिसीस

धन्यवाद! जो हिस्सा मेरे लिए गायब था, वह वास्तव में फ्लेक्स विशेषताओं में से कोई भी नहीं था, लेकिन ऊँचाई: युक्त तत्व पर 100% (जो मेरे लिए एक .pusher div था क्योंकि मेरी साइट में एक उत्तरदायी साइडबार शामिल है)।

— १: को

0

यहां फ्लेक्स का उपयोग करने का एक उदाहरण है जो इंटरनेट एक्सप्लोरर 11 और क्रोम में भी काम करता है।

एचटीएमएल

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" >
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
<title>Flex Test</title>
<style>
html, body {
    margin: 0px;
    padding: 0px;
    height: 100vh;
}
.main {
    display: -webkit-flex;
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;
    align-items: stretch;
    min-height: 100vh;
}

.main::after {
  content: '';
  height: 100vh;
  width: 0;
  overflow: hidden;
  visibility: hidden;
  float: left;
}

.left {
    width: 200px;
    background: #F0F0F0;
    flex-shrink: 0;
}

.right {
    flex-grow: 1;
    background: yellow;
}
</style>
</head>

<body>
<div class="main">
    <div class="left">
        <div style="height: 300px;">
        </div>
    </div>

    <div class="right">
        <div style="height: 1000px;">
            test test test
        </div>
    </div>
</div>
</body>
</html>

स्निपेट का विस्तार करें

— बैडट्री लू
स्रोत

15

कृपया अतिरिक्त जानकारी दें - बजाय अपने चिपकाने के Html।

— पीटर

7

हालांकि यह उत्तर शायद सही और उपयोगी है, यह पसंद किया जाता है यदि आप इसे समझाने के साथ कुछ स्पष्टीकरण भी शामिल करते हैं कि यह समस्या को हल करने में कैसे मदद करता है। यह भविष्य में विशेष रूप से उपयोगी हो जाता है, अगर कोई परिवर्तन (संभवतः असंबंधित) होता है जो इसे काम करना बंद कर देता है और उपयोगकर्ताओं को यह समझने की आवश्यकता है कि एक बार कैसे काम किया।

— एरिटी सीडोहल

0

कभी-कभी यह जोड़ने के रूप में सरल होता है: '-ms-' शैली के सामने जैसा -ms-flex-flow: row wra; यह भी काम करने के लिए पाने के लिए।

— मार्सेल ग्रे
स्रोत

3

कभी-कभी, लेकिन अधिकांश बार नहीं;) आइए वैश्विक स्तर पर IE को डंप करें

— ट्रैविनासिस