多列Flexbox佈局在IE11中作爲單行渲染

在Chrome/Firefox/Safari中，我得到了一個很好的三列布局。多列Flexbox佈局在IE11中作爲單行渲染

在IE11中，我得到一行非常長的文本。

.row的高度等於文本的line-height。

我創建了一個簡單的jsfiddle來說明問題。

這是爲什麼發生？

body { 
 
    background: -webkit-linear-gradient(left, #09c 0, #ad258c 28%, #eb2a31 53%, #f8ec2c 77%, #00a255 100%); 
 
    background: linear-gradient(to right, #09c 0, #ad258c 28%, #eb2a31 53%, #f8ec2c 77%, #00a255 100%); 
 
    box-sizing: border-box; 
 
    max-width: 1024px; 
 
    margin: 0 auto; 
 
    color: black; 
 
    padding: 0 7px 7px 7px; 
 
} 
 
.row { 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
} 
 
.row section { 
 
    position: relative; 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -webkit-box-orient: vertical; 
 
    -webkit-box-direction: normal; 
 
    -ms-flex-direction: column; 
 
    flex-direction: column; 
 
    -webkit-box-flex: 1; 
 
    -ms-flex: 1 1 0; 
 
    flex: 1 1 0; 
 
    background: white; 
 
    margin-top: 7px; 
 
    margin-right: 7px; 
 
} 
 
.row section:last-child { 
 
    margin-right: 0; 
 
}

<div class="row"> 
 
    <section>[text]</section> 
 
    <section>[text]</section> 
 
    <section>[text]</section> 
 
</div>

來源

2016-07-25 Raphael Rafatpanah

它在IE11一個愚蠢的怪癖。

相反的：

flex: 1 1 0;

用途：

flex: 1 1 0px;

IE11不無單位flex-basis發揮好。

我在研究這個答案時偶然發現了這個：https://stackoverflow.com/a/34014580/3597276

來源

2016-07-25 20:22:37

多列Flexbox佈局在IE11中作爲單行渲染

回答

相關問題