Flexbox dan Internet Explorer 11 (display: flex in <html>?)

117

Saya berencana untuk beralih dari layout "floaty" dan menggunakan CSS flexbox untuk proyek mendatang. Saya sangat senang melihat bahwa semua browser utama dalam versi mereka saat ini tampaknya mendukung (dalam satu atau lain cara) flexbox.

Saya menuju ke "Dipecahkan oleh Flexbox" untuk melihat beberapa contoh. Namun contoh "Sticky Footer" tampaknya tidak berfungsi di Internet Explorer 11. Saya bermain-main sedikit dan membuatnya berfungsi dengan menambahkan display:flexke <html>dan width:100%ke<body>

Jadi pertanyaan pertama saya adalah: Adakah yang bisa menjelaskan logika itu kepada saya? Saya hanya bermain-main dan berhasil, tetapi saya tidak begitu mengerti mengapa itu bekerja seperti itu ...

Lalu ada contoh "Objek Media" yang bekerja di semua browser kecuali - Anda dapat menebaknya - Internet Explorer. Aku juga bermain-main dengan itu, tapi tidak berhasil.

Oleh karena itu, pertanyaan kedua saya adalah: Apakah ada kemungkinan "bersih" untuk mendapatkan contoh "Objek Media" yang bekerja di Internet Explorer?

html css flexbox cross-browser Kodekan
sumber

1

Hanya pembaruan untuk pertanyaan lama ini: Demo yang ditautkan berfungsi dengan baik di IE11. Pasti ada bug yang diperbaiki dalam 3 tahun sejak ini ditanyakan.

Daryl

151

Menurut http://caniuse.com/#feat=flexbox :

"Nilai default IE10 dan IE11 flexadalah 0 0 autodaripada 0 1 auto, sesuai spesifikasi draf, per September 2013"

Jadi dengan kata sederhana, jika di suatu tempat di CSS Anda memiliki sesuatu seperti ini:, flex:1itu tidak diterjemahkan dengan cara yang sama di semua browser. Cobalah mengubahnya menjadi 1 0 0dan saya yakin Anda akan segera melihat bahwa itu-agak- berhasil.

Masalahnya adalah solusi ini mungkin akan mengacaukan firefox, tetapi kemudian Anda dapat menggunakan beberapa peretasan untuk hanya menargetkan Mozilla dan mengubahnya kembali:

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

Karena flexboxmerupakan Kandidat W3C dan tidak resmi, browser cenderung memberikan hasil yang berbeda, tetapi saya rasa itu akan berubah dalam waktu dekat.

Jika seseorang memiliki jawaban yang lebih baik, saya ingin tahu!

Odisseas
sumber

1

Saya pikir itu berarti kebutuhan IE10 -ms-flex: 1 0 0;dan IE11 flex: 1 0 0;..?

Eystein

19

Dengan Google Chrome 39 ini tiba-tiba berhenti bekerja untuk saya. Butuh waktu lama untuk melacaknya, tapi itu spesifikasi dari digit ketiga. Chrome 39 tidak mematuhi flex: 1 0 0;. Tapi flex: 1 0 0%;( perhatikan % ) atau flex: 1 0 auto;akan berhasil.

Eystein

Ya, ini benar, ini merusak beberapa desain saya juga! Saya memperbaikinya hanya dengan mengubahnya menjadi flex: 1;saya kira itu tergantung pada apa yang Anda inginkan, meskipun ...

Odisseas

1

Masalah inti dengan IE11 adalah cara penghitungannya flex-basis. Github memiliki diskusi yang baik tentang mengapa flex:1 0 100%berfungsi di beberapa kasus untuk IE11 sementara flex: 1 0 0%atau bahkan flex: 1 0 autobekerja di orang lain. Anda harus tahu isinya sebelumnya.

P. Brian.Mackey

Dari caniuse.com/#feat=flexbox , secara khusus disebutkan di bawah masalah yang diketahui bahwa IE 11 memerlukan unit untuk ditambahkan ke argumen ketiga, properti basis-fleksibel ..

Henry Neo

49

Gunakan wadah fleksibel lain untuk memperbaiki min-heightmasalah di IE10 dan 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;
}

Lihat demo kerja .

Jangan gunakan tata letak flexbox secara langsung bodykarena ini mengacaukan elemen yang dimasukkan melalui plugin jQuery (pelengkapan otomatis, popup, dll.).
Jangan gunakan height:100%atau height:100vhdi wadah Anda karena footer akan menempel di bagian bawah jendela dan tidak akan beradaptasi dengan konten yang panjang.
Gunakan flex-grow:1daripada flex:1menyebabkan nilai default IE10 dan IE11 untuk flexare 0 0 autodan tidak 0 1 auto.

BeliG
sumber

3

Saya menemukan saya harus menambahkan flex-direction: columnuntuk .ie-fixMinHeightmenghindari efek samping. Jika Anda tidak memiliki HTML khusus IE, Anda dapat menggunakan.fixMinHeight { display: -ms-flexbox; -ms-flex-direction: column; }

Mark Horgan

Saya tahu ini berumur 2 tahun, tapi terima kasih! Saya mengikuti stackoverflow.com/a/24979148/359157 ini dan berjuang selamanya untuk mencari tahu mengapa IE rusak sementara Edge dan Chrome bekerja dengan sempurna. The heightvs min-heightadalah kuncinya.

TyCobb

39

Anda hanya perlu flex:1; Ini akan memperbaiki masalah untuk IE11. Saya mendukung Odisseas. Selain itu, tetapkan tinggi 100% ke html, elemen tubuh .

Perubahan 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 yang berfungsi: http://jsfiddle.net/3tpuryso/13/

Ashok Kumar Gupta
sumber

Bisakah Anda menjelaskan lebih lanjut tentang masalah ini: Apakah ada kemungkinan yang "bersih" untuk membuat contoh "Objek Media" berfungsi di IE?

Ashok Kumar Gupta

1

Ini berhasil untuk saya. Satu hal yang saya temukan (karena menangkap saya) adalah bahwa jika Anda memiliki elemen yang berisi, yang display: flex;dan gaya terkait harus diterapkan baik pada bodydan kontainer: jsfiddle.net/Skateside/nezdrrkr

James Panjang

Menyetel tinggi html ke 100% tampaknya menyebabkan konten mainberhenti berkembang dengan baik (setidaknya di chrome); jika Anda menambahkan cukup konten, itu akan membanjiri footer. jsfiddle.net/3tpuryso/65

FoolishSeth

@FoolishSeth seperti saat ini pada dasarnya Anda menyuruhnya untuk tumbuh hingga 100% dan tidak lebih dari satu piksel. Anda harus mengatur htmlke min-height: 100%, untuk mengikuti konten Anda

Odisseas

Terima kasih! Bagian yang hilang bagi saya sebenarnya bukanlah atribut flex apa pun, tetapi tingginya: 100% pada elemen yang memuatnya (yang bagi saya adalah div .pusher karena situs saya menyertakan sidebar responsif).

zanther

0

Berikut adalah contoh penggunaan flex yang juga berfungsi di Internet Explorer 11 dan 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>

Luaskan cuplikan

BadTree Lu
sumber

15

Harap berikan informasi tambahan - alih-alih hanya menempelkan Html.

Peter

7

Meskipun jawaban ini mungkin benar dan berguna, akan lebih disukai jika Anda menyertakan beberapa penjelasan bersama dengan penjelasan bagaimana hal itu membantu memecahkan masalah. Ini menjadi sangat berguna di masa mendatang, jika ada perubahan (mungkin tidak terkait) yang menyebabkannya berhenti bekerja dan pengguna perlu memahami cara kerjanya dulu.

Erty Seidohl

0

Terkadang sesederhana menambahkan: '-ms-' di depan gaya Like -ms-flex-flow: row wrap; untuk membuatnya bekerja juga.

Marsel Grey
sumber

3

Kadang-kadang, tetapi sering kali tidak;) Mari kita membuang IE secara global

trainoasis

Flexbox dan Internet Explorer 11 (display: flex in <html>?)

Jawaban: