Flexbox i Internet Explorer 11 (wyświetl: flex w <html>?)

117

Planuję odejść od "pływających" układów i używać CSS flexbox w przyszłych projektach. Byłem zachwycony, widząc, że wszystkie główne przeglądarki w ich aktualnych wersjach obsługują (w taki czy inny sposób) flexbox.

Udałem się do „Rozwiązany przez Flexbox”, aby spojrzeć na kilka przykładów. Jednak przykład „Sticky Footer” nie wydaje się działać w programie Internet Explorer 11. Pobawiłem się trochę i display:flexuruchomiłem, dodając do <html>i width:100%do<body>

Więc moje pierwsze pytanie brzmi: czy ktoś może mi wyjaśnić tę logikę? Po prostu pogrzebałem i zadziałało, ale nie do końca rozumiem, dlaczego zadziałało w ten sposób ...

Następnie mamy przykład „Media Object”, który działa we wszystkich przeglądarkach z wyjątkiem - zgadłeś - Internet Explorera. Ja też się tym bawiłem, ale bez powodzenia.

Moje drugie pytanie brzmi zatem: czy istnieje „czysta” możliwość uzyskania przykładu „obiektu multimedialnego” działającego w przeglądarce Internet Explorer?

— Kodekan
źródło

1

Tylko aktualizacja tego starego pytania: Połączone demo działa dobrze na IE11. Musiał zostać naprawiony błąd w ciągu 3 lat, odkąd o to zapytano.

— Daryl

151

Według http://caniuse.com/#feat=flexbox :

„Wartości domyślne IE10 i IE11 dla flexsą 0 0 autoraczej niż 0 1 autozgodne z projektem specyfikacji, stan na wrzesień 2013 r.”

Więc w prostych słowach, jeśli gdzieś w swoim CSS masz coś takiego:, flex:1to nie jest tłumaczone tak samo we wszystkich przeglądarkach. Spróbuj zmienić to na, 1 0 0a wierzę, że od razu zobaczysz, że to -kinda- działa.

Problem polega na tym, że to rozwiązanie prawdopodobnie zepsuje firefoxa, ale wtedy możesz użyć kilku hacków, aby atakować tylko Mozillę i zmienić to z powrotem:

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

Ponieważ flexboxjest kandydatem do W3C, a nie oficjalnym, przeglądarki zazwyczaj dają różne wyniki, ale myślę, że to się zmieni w najbliższej przyszłości.

Jeśli ktoś ma lepszą odpowiedź to chciałbym wiedzieć!

— Odisseas
źródło

1

Myślę, że to oznacza potrzeby -ms-flex: 1 0 0;IE10 i IE11 flex: 1 0 0;..?

— Eystein

19

W Google Chrome 39 nagle przestało to działać. Wieki zajęło mi wytropienie, ale to była specyfikacja trzeciej cyfry. Chrome 39 nie jest zgodny flex: 1 0 0;. Ale flex: 1 0 0%;( zwróć uwagę na % ) lub flex: 1 0 auto;zadziała.

— Eystein

Tak, to prawda, zepsuło też niektóre moje projekty! Naprawiłem to, po prostu zmieniając to na flex: 1;myślę, że zależy to od tego, do czego

— zmierzasz

1

Podstawowym problemem związanym z IE11 jest sposób obliczania flex-basis. Github dobrze omawia, dlaczego flex:1 0 100%w niektórych przypadkach działa w IE11, a flex: 1 0 0%nawet flex: 1 0 autodziała w innych. Musisz znać zawartość z wyprzedzeniem.

— P.Brian.Mackey

Na caniuse.com/#feat=flexbox , w znanych problemach wyraźnie wspomniano, że IE 11 wymaga dodania jednostki do trzeciego argumentu, właściwości flex- base ..

— Henry Neo

49

Użyj innego kontenera elastycznego, aby rozwiązać min-heightproblem w IE10 i 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;
}

Zobacz działające demo .

Nie używaj układu flexbox bezpośrednio, bodyponieważ skręca elementy wstawiane za pomocą wtyczek jQuery (autouzupełnianie, wyskakujące okienko itp.).
Nie używaj height:100%ani height:100vhna swoim kontenerze, ponieważ stopka będzie przyklejać się do dołu okna i nie dostosuje się do długich treści.
Użyj flex-grow:1zamiast flex:1powodować domyślne wartości IE10 i IE11 dla flexsą 0 0 autoi nie 0 1 auto.

— BeliG
źródło

3

Znalazłem musiałem dodać flex-direction: columndo .ie-fixMinHeightuniknąć skutków ubocznych. Jeśli nie masz HTML-a specyficznego dla IE, możesz użyć.fixMinHeight { display: -ms-flexbox; -ms-flex-direction: column; }

— Mark Horgan

Wiem, że to ma 2 lata, ale dziękuję! Śledziłem ten stackoverflow.com/a/24979148/359157 i walczyłem bez końca, próbując dowiedzieć się, dlaczego IE został uszkodzony, podczas gdy Edge i Chrome działały bez zarzutu. heightVs min-heightbył klucz.

— TyCobb

39

Po prostu potrzebujesz flex:1; To naprawi problem z IE11. Drugie Odisseas.Dodatkowo przypisz 100% wysokości do html, elementów body .

Zmiany 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;
}

działający adres URL: http://jsfiddle.net/3tpuryso/13/

— Ashok Kumar Gupta
źródło

Czy mógłbyś wyjaśnić więcej na ten temat: Czy istnieje "czysta" możliwość uzyskania przykładu "obiektu multimedialnego" działającego w IE?

— Ashok Kumar Gupta

1

To działa dla mnie. Jedną rzeczą, którą znalazłem (ponieważ mnie to złapało) jest to, że jeśli masz element zawierający, display: flex;style i skojarzone z nim muszą być zastosowane zarówno do bodykontenera, jak i: jsfiddle.net/Skateside/nezdrrkr

— James Long

Wydaje się, że ustawienie wysokości html na 100% powoduje, że zawartość mainprzestaje rosnąć prawidłowo (przynajmniej w chrome); jeśli dodasz wystarczającą ilość treści, zajmie to stopkę. jsfiddle.net/3tpuryso/65

— FoolishSeth

@Foolish Wygląda tak, jak jest teraz, po prostu mówisz mu, aby urósł do 100%, a nie o jeden piksel więcej. Należy ustawić htmlaby min-height: 100%zamiast podążać wraz z zawartością

— Odisseas

Dzięki! Częścią, której mi brakowało, nie był w rzeczywistości żaden z atrybutów flex, ale wysokość: 100% w elemencie zawierającym (który dla mnie był .pusher div, ponieważ moja witryna zawiera responsywny pasek boczny).

— zanther

0

Oto przykład użycia flex, który działa również w Internet Explorerze 11 i 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>

Rozwiń fragment

— BadTree Lu
źródło

15

Podaj dodatkowe informacje - zamiast po prostu wklejać Html.

— Peter,

7

Chociaż ta odpowiedź jest prawdopodobnie poprawna i przydatna, najlepiej jest dołączyć do niej jakieś wyjaśnienie, aby wyjaśnić, w jaki sposób pomaga ona rozwiązać problem. Staje się to szczególnie przydatne w przyszłości, jeśli nastąpi zmiana (prawdopodobnie niezwiązana), która spowoduje, że przestanie działać, a użytkownicy muszą zrozumieć, jak kiedyś działało.

— Erty Seidohl

0

Czasami jest to tak proste, jak dodanie: „-ms-” przed stylem Podobnie jak -ms-flex-flow: zawijanie wiersza; żeby to też zadziałało.

— Marsel Gray
źródło

3

Czasami, ale w większości przypadków nie;)

— Zrzućmy