Flexbox และ Internet Explorer 11 (display: flex in <html>?)

117

ฉันวางแผนที่จะย้ายออกจากรูปแบบ "floaty" และใช้ CSS flexbox สำหรับโครงการในอนาคต ฉันรู้สึกยินดีที่เห็นว่าเบราว์เซอร์หลัก ๆ ทั้งหมดในเวอร์ชันปัจจุบันดูเหมือนจะรองรับ flexbox (ไม่ทางใดก็ทางหนึ่ง)

ฉันไปที่"แก้ไขโดย Flexbox"เพื่อดูตัวอย่างบางส่วน อย่างไรก็ตาม "Sticky ท้าย" ตัวอย่างที่ดูเหมือนจะไม่ทำงานใน Internet Explorer 11 ที่ผมเล่นรอบ bit และได้ไปทำงานโดยการเพิ่มdisplay:flexไป<html>และwidth:100%ไป<body>

คำถามแรกของฉันคือใครช่วยอธิบายตรรกะนั้นให้ฉันฟังได้ไหม ฉันแค่เล่นตัวไปมาและมันได้ผล แต่ฉันไม่ค่อยเข้าใจว่าทำไมมันถึงได้ผลแบบนั้น ...

จากนั้นจะมีตัวอย่าง "Media Object" ที่ใช้งานได้ในทุกเบราว์เซอร์ยกเว้น - คุณเดาได้ - Internet Explorer ฉันเล่นกับมันเหมือนกัน แต่ไม่ประสบความสำเร็จใด ๆ

คำถามที่สองของฉันคือ: มีความเป็นไปได้ที่ "สะอาด" ที่จะทำให้ตัวอย่าง "Media Object" ทำงานใน Internet Explorer ได้หรือไม่

— Kodekan
แหล่งที่มา

1

เพียงอัปเดตคำถามเก่านี้: การสาธิตที่เชื่อมโยงทำงานได้ดีบน IE11 จะต้องได้รับการแก้ไขข้อบกพร่องใน 3 ปีนับตั้งแต่มีการถามถึงสิ่งนี้

— Daryl

151

อ้างอิงจากhttp://caniuse.com/#feat=flexbox :

"ค่าเริ่มต้นของ IE10 และ IE11 flexเป็น0 0 autoมากกว่า0 1 autoตามข้อกำหนดฉบับร่าง ณ เดือนกันยายน 2013"

ดังนั้นในคำพูดธรรมดาถ้าที่ไหนสักแห่งใน CSS ของคุณคุณมีสิ่งนี้: flex:1นั่นไม่ได้ถูกแปลในลักษณะเดียวกันในทุกเบราว์เซอร์ ลองเปลี่ยนเป็น1 0 0และฉันเชื่อว่าคุณจะเห็นทันทีว่ามันทำงานได้ดี

ปัญหาคือวิธีแก้ปัญหานี้อาจทำให้ firefox เสียหาย แต่คุณสามารถใช้แฮ็กบางอย่างเพื่อกำหนดเป้าหมายเฉพาะ Mozilla และเปลี่ยนกลับ:

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

เนื่องจากflexboxเป็นผู้สมัคร W3C และไม่เป็นทางการเบราว์เซอร์จึงมีแนวโน้มที่จะให้ผลลัพธ์ที่แตกต่างกัน แต่ฉันเดาว่าจะมีการเปลี่ยนแปลงในอนาคตอันใกล้

ถ้าใครมีคำตอบที่ดีกว่านี้ฉันอยากรู้!

— Odisseas
แหล่งที่มา

1

ฉันคิดว่านั่นหมายถึงความต้องการของ IE10 -ms-flex: 1 0 0;และ IE11 flex: 1 0 0;.. ?

— Eystein

19

ด้วย Google Chrome 39 สิ่งนี้ทำให้ฉันหยุดทำงานกะทันหัน ฉันใช้เวลาหลายปีในการติดตาม แต่มันเป็นข้อกำหนดของตัวเลขหลักที่สาม โครเมี่ยม 39 flex: 1 0 0;ไม่เป็นไปตาม แต่flex: 1 0 0%;( สังเกต % ) หรือflex: 1 0 auto;จะทำงาน

— Eystein

ใช่นี่เป็นเรื่องจริงมันก็ทำให้งานออกแบบของฉันพังเช่นกัน! ฉันแก้ไขโดยเปลี่ยนเป็นflex: 1;ฉันเดาว่ามันขึ้นอยู่กับสิ่งที่คุณกำลังจะทำแม้ว่า ...

— Odisseas

1

ปัญหาหลักที่มี IE11 flex-basisเป็นวิธีที่จะคำนวณ Githubมีการอภิปรายที่ดีว่าเหตุใดจึงใช้flex:1 0 100%งานได้กับ IE11 ในบางกรณีในขณะที่flex: 1 0 0%หรือแม้กระทั่งflex: 1 0 autoทำงานกับผู้อื่น คุณต้องรู้เนื้อหาล่วงหน้า

— P. Brian.Mackey

จากcaniuse.com/#feat=flexboxได้กล่าวถึงโดยเฉพาะภายใต้ปัญหาที่ทราบว่า IE 11 ต้องการให้เพิ่มหน่วยในอาร์กิวเมนต์ที่สามซึ่งเป็นคุณสมบัติพื้นฐานแบบยืดหยุ่น ..

— Henry Neo

49

ใช้คอนเทนเนอร์แบบยืดหยุ่นอื่นเพื่อแก้ไขmin-heightปัญหาใน IE10 และ IE11:

HTML

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

CSS

.ie-fixMinHeight {
    display:flex;
}

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

#content {
    flex-grow:1;
}

ดูการสาธิตการทำงาน

อย่าใช้เลย์เอาต์ Flexbox โดยตรงบน bodyเพราะมันสกรูองค์ประกอบที่แทรกผ่านปลั๊กอิน jQuery (เติมข้อความอัตโนมัติป๊อปอัพ ฯลฯ )
อย่าใช้height:100%หรือheight:100vhบนคอนเทนเนอร์ของคุณเพราะส่วนท้ายจะติดที่ด้านล่างของหน้าต่างและจะไม่ปรับให้เข้ากับเนื้อหายาว ๆ
ใช้flex-grow:1มากกว่าflex:1สาเหตุ IE10 และ IE11 ค่าเริ่มต้นสำหรับflexเป็นและไม่ได้0 0 auto0 1 auto

— Belig
แหล่งที่มา

3

ผมพบว่าผมมีการเพิ่มflex-direction: columnเพื่อ.ie-fixMinHeightที่จะหลีกเลี่ยงผลข้างเคียง หากคุณไม่มี HTML เฉพาะของ IE คุณสามารถใช้ได้.fixMinHeight { display: -ms-flexbox; -ms-flex-direction: column; }

— Mark Horgan

ฉันรู้ว่านี่อายุ 2 ขวบ แต่ขอบคุณ! ฉันติดตามstackoverflow.com/a/24979148/359157นี้และต่อสู้ตลอดไปโดยพยายามหาสาเหตุว่าทำไม IE ถึงถูกจับในขณะที่ Edge และ Chrome ทำงานได้อย่างไม่มีที่ติ heightVS min-heightคือกุญแจ

— TyCobb

39

คุณเพียงแค่ต้องการflex:1; จะแก้ไขปัญหาสำหรับ IE11 ฉันสอง Odisseas กำหนดนอกจากนี้สูง 100% เพื่อ HTML, องค์ประกอบของร่างกาย

การเปลี่ยนแปลง CSS:

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/

— Ashok Kumar Gupta
แหล่งที่มา

คุณช่วยอธิบายเพิ่มเติมเกี่ยวกับปัญหานี้ได้ไหม: มีความเป็นไปได้ที่ "Media Object" ที่จะทำงานใน IE หรือไม่

— Ashok Kumar Gupta

1

สิ่งนี้ใช้ได้กับฉัน สิ่งหนึ่งที่ผมพบ (เพราะมันจับฉันออก) คือว่าถ้าคุณมีองค์ประกอบที่มีที่display: flex;และรูปแบบที่เกี่ยวข้องจะต้องนำไปใช้กับทั้งbodyและภาชนะ: jsfiddle.net/Skateside/nezdrrkr

— เจมส์ยาว

การตั้งค่าความสูง html เป็น 100% ดูเหมือนว่าจะทำให้เนื้อหาmainหยุดเติบโตอย่างเหมาะสม (อย่างน้อยก็ในโครเมี่ยม) หากคุณเพิ่มเนื้อหามากพอมันจะทับส่วนท้าย jsfiddle.net/3tpuryso/65

— FoolishSeth

@FoolishSeth ในแบบที่เป็นอยู่ตอนนี้คุณกำลังบอกให้มันเติบโตถึง 100% และไม่ใช่พิกเซลมากขึ้น คุณควรตั้งค่าhtmlการmin-height: 100%แทนเพื่อทำตามพร้อมกับเนื้อหาของคุณ

— Odisseas

ขอบคุณ! ส่วนที่ขาดหายไปสำหรับฉันจริง ๆ แล้วไม่ใช่แอตทริบิวต์ flex แต่ความสูง: 100% ในองค์ประกอบที่มี (ซึ่งสำหรับฉันคือ .pusher div เนื่องจากไซต์ของฉันมีแถบด้านข้างที่ตอบสนองได้)

— zanther

0

นี่คือตัวอย่างของการใช้ flex ที่ใช้ได้กับ Internet Explorer 11 และ Chrome

HTML

<!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>

ขยายข้อมูลโค้ด

— BadTree Lu
แหล่งที่มา

15

โปรดให้ข้อมูลเพิ่มเติม - แทนที่จะวางHtmlไฟล์.

— ปีเตอร์

7

แม้ว่าคำตอบนี้อาจจะถูกต้องและมีประโยชน์ แต่ก็เป็นที่ต้องการหากคุณใส่คำอธิบายไว้ด้วยเพื่ออธิบายว่าจะช่วยแก้ปัญหาได้อย่างไร สิ่งนี้จะมีประโยชน์อย่างยิ่งในอนาคตหากมีการเปลี่ยนแปลง (อาจไม่เกี่ยวข้อง) ที่ทำให้หยุดทำงานและผู้ใช้ต้องเข้าใจว่าครั้งหนึ่งเคยทำงานอย่างไร

— Erty Seidohl

0

บางครั้งมันก็ง่ายเหมือนการเพิ่ม: '-ms-' ข้างหน้าสไตล์ Like -ms-flex-flow: row wrap; เพื่อให้มันใช้งานได้

— มาร์เซลเกรย์
แหล่งที่มา

3

บางครั้ง แต่ส่วนใหญ่ไม่ได้) มาทิ้ง IE ทั่วโลกกัน

— เถอะ