Flexbox ve Internet Explorer 11 (ekran: <html> de flex?)

117

"Floaty" düzenlerden uzaklaşmayı ve gelecekteki projeler için CSS flexbox'ı kullanmayı planlıyorum. Mevcut sürümlerindeki tüm büyük tarayıcıların (bir şekilde) flexbox'ı desteklediğini görmekten çok memnun oldum.

Bazı örneklere bakmak için "Flexbox tarafından Çözüldü" e gittim . Ancak "Sabit Altbilgi" örneği, Internet Explorer 11. I'de işe görünmüyor biraz etrafında oynanan ve ekleyerek çalışmalarına aldım display:flexetmek <html>ve width:100%karşı<body>

İlk sorum şu: Bu mantığı bana açıklayan var mı? Sadece oynadım ve işe yaradı, ama neden bu şekilde çalıştığını tam olarak anlamıyorum ...

Sonra, Internet Explorer dışında tüm tarayıcılarda çalışan "Medya Nesnesi" örneği vardır. Ben de bununla uğraştım ama başarılı olamadım.

Bu nedenle ikinci sorum şu: Internet Explorer'da "Medya Nesnesi" örneğini çalıştırmak için "temiz" bir olasılık var mı?

— Kodekan
kaynak

1

Bu eski soruya sadece bir güncelleme: Bağlantılı demo IE11'de iyi çalışıyor. Bu sorulduğundan bu yana geçen 3 yıl içinde bir hata düzeltilmiş olmalı.

— Daryl

151

Http://caniuse.com/#feat=flexbox'a göre :

"IE10 ve IE11 varsayılan değerler için flexolan 0 0 autoziyade 0 1 autoEylül 2013 tarihi itibarıyla, taslak spec göre,"

Yani basit bir deyişle, CSS'nizde bir yerde şuna benzer bir şey varsa: flex:1bu, tüm tarayıcılarda aynı şekilde çevrilmemiştir. Olarak değiştirmeyi deneyin 1 0 0ve inanıyorum ki hemen işe yaradığını göreceksiniz.

Sorun şu ki, bu çözüm muhtemelen Firefox'u bozacaktır, ancak daha sonra yalnızca Mozilla'yı hedeflemek ve eski haline getirmek için bazı hack'leri kullanabilirsiniz:

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

Yana flexboxbir W3C Aday ve resmi değil, tarayıcılar farklı sonuçlar verir eğilimindedir, ama bu yakın gelecekte değişecek sanırım.

Birinin daha iyi bir cevabı varsa bilmek isterim!

— Odisseas
kaynak

1

Sanırım bu, IE10 ihtiyaçları -ms-flex: 1 0 0;ve IE11 flex: 1 0 0;.. demek oluyor ?

— Eystein

19

Google Chrome 39 ile bu aniden benim için çalışmayı bıraktı. Bulmam yaşlarımı aldı, ancak bu üçüncü rakamın spesifikasyonuydu. Chrome 39'a uymuyor flex: 1 0 0;. Ancak flex: 1 0 0%;( % 'ye dikkat edin ) veya çalışacaktır. flex: 1 0 auto;

— Eystein

Evet, bu doğru, bazı tasarımlarımı da bozdu! Bunu basitçe olarak değiştirerek düzelttim flex: 1;sanırım bu ne için gittiğine bağlı olsa da ...

— Odisseas

1

IE11 ile ilgili temel sorun, hesaplama şeklidir flex-basis. Github neden iyi bir tartışma vardır flex:1 0 100%ederken IE11 için bazı durumlarda çalışır flex: 1 0 0%ve hatta flex: 1 0 autobaşkaları çalışır. İçeriği önceden bilmeniz gerekir.

— P. Brian.Mackey

Gönderen caniuse.com/#feat=flexbox , bu özellikle IE 11 üncü argüman eklenecek bir birim, flex-baz özelliği .. gerektirdiğini bilinen sorunlar altında belirtilen

— Henry Neo'ya

49

min-heightIE10 ve IE11'deki sorunu çözmek için başka bir esnek kapsayıcı kullanın :

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

Çalışan bir demoya bakın .

Flexbox düzenini doğrudan kullanmayın bodyçünkü jQuery eklentileri (otomatik tamamlama, açılır pencere vb.) Aracılığıyla eklenen öğeleri vidalar.
Altbilgi pencerenin altına yapışacağı ve uzun içeriğe uyum sağlamayacağı için kapsayıcınızda height:100%veya kullanmayın height:100vh.
Kullanım flex-grow:1yerine flex:1için IE10 ve IE11 varsayılan değerler neden flexolan 0 0 autove olmayan 0 1 auto.

— Beliğ
kaynak

3

Yan etkilerden kaçınmak için eklemem flex-direction: columngerektiğini anladım .ie-fixMinHeight. IE'ye özel HTML'niz yoksa kullanabilirsiniz.fixMinHeight { display: -ms-flexbox; -ms-flex-direction: column; }

— Mark Horgan

Bunun 2 yaşında olduğunu biliyorum ama teşekkürler! Bu stackoverflow.com/a/24979148/359157'yi takip ediyordum ve Edge ve Chrome kusursuz çalışırken IE'nin neden bozulduğunu anlamaya çalışırken sonsuza dek savaştım. heightVs min-heightanahtar oldu.

— TyCobb

39

Sadece ihtiyacınız var flex:1; IE11 için sorunu çözecektir. Odisseas'ı ikinci ben. Ek olarak html, body öğelerine% 100 yükseklik atayın .

CSS değişiklikleri:

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

çalışan url: http://jsfiddle.net/3tpuryso/13/

— Ashok Kumar Gupta
kaynak

Bu konu hakkında biraz daha açıklayabilir misiniz? IE'de çalışan "Medya Nesnesi" örneğini elde etmenin "temiz" bir olasılığı var mı?

— Ashok Kumar Gupta

1

Bu benim için çalışıyor. Bulduğum bir şey (çünkü beni yakaladı), içeren bir öğeye sahipseniz, display: flex;ve ilişkili stillerin hembody kapsayıcıya hem de kapsayıcıya uygulanması gerektiğidir : jsfiddle.net/Skateside/nezdrrkr

— James Long

Html yüksekliğinin% 100 olarak ayarlanması, içeriğinin maindüzgün büyümesini durdurmasına neden oluyor (en azından kromda); Yeterli içerik eklerseniz altbilgiyi aşacaktır. jsfiddle.net/3tpuryso/65

— FoolishSeth

@FoolishSeth şu anda olduğu gibi, temelde% 100 büyümesini söylüyorsunuz, bir piksel fazla değil. İçeriğinizi takip etmek htmliçin min-height: 100%yerine ayarlamalısınız

— Odisseas

Teşekkürler! Benim için eksik olan kısım aslında flex özniteliklerinden herhangi biri değil, yüksekliğiydi: içeren öğede% 100 (benim için bir .pusher div idi çünkü sitem duyarlı bir kenar çubuğu içeriyordu).

— zanther

0

İşte aynı zamanda Internet Explorer 11 ve Chrome'da da çalışan esnek kullanım örneği.

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>

Snippet'i genişlet

— BadTree Lu
kaynak

15

Lütfen ek bilgi verin - yalnızca kimliğinizi yapıştırmak yerine Html.

— Peter

7

Bu cevap muhtemelen doğru ve yararlı olsa da, sorunun çözülmesine nasıl yardımcı olduğunu açıklamak için bazı açıklamalara yer vermeniz tercih edilir. Çalışmayı durduran bir değişiklik (muhtemelen ilgisiz) varsa ve kullanıcıların bir zamanlar nasıl çalıştığını anlamaları gerekiyorsa, bu özellikle gelecekte yararlı olur.

— Erty Seidohl

0

Bazen eklemek kadar basittir: -ms-flex-flow gibi stilin önüne '-ms-': satır kaydırma; aynı zamanda çalışmasını sağlamak için.

— Marsel Grey
kaynak

3

Bazen, ama çoğu zaman değil;) IE'yi global olarak terk edelim

— trainoasis