Flexbox在Explorer 11上的包裹寬度

Question

我有一個簡單的代碼，開始使用flexbox。 像往常一樣，可以在Firefox，Safari，Chrome，Edge，Opera上完美運行，但在IE11上卻不能。

關於某些響應幀，其中包含定義區域內的圖像和文本。 在我的代碼中，我只使用display: -webkit-flex; display: -ms-flexbox; display: flex; display: -webkit-flex; display: -ms-flexbox; display: flex; 這足夠了。 但是在IE11上，我看到四列：

我已經在Stackoverflow上找到了關於同一主題的一些問題，在答案沒有任何反應之后，甚至添加了更多行代碼，或者將max或min-width或heigh替換為width或heigh。 我想我做錯了什么，但我不知道該怎么辦。

（最好在完整頁面上查看代碼段）有什么幫助嗎？

 html{ position:absolute; font-size:1.15rem; font-family:HelveticaNeue-Light,"Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif; font-weight:500; line-height:1.2rem; color: #62647b; height: 100%; box-sizing: border-box; margin: 4rem; background: gray; } #FRAME {display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: -o-flex; display: flex; -webkit-flex-direction: row; -moz-flex-direction: row; -ms-flex-direction: row; -o-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; flex-wrap: wrap; flex-flow: row; overflow: hidden; position: relative; -ms-flex-preferred-size:25%; flex-basis:25%; width: 25%; float:left; background: #FFFFFF; justify-content: space-between; box-sizing:border-box; border: solid 0.1rem gray; } .IMAGECOL{-ms-flex-preferred-size:63%; flex-basis:63%; width:63%; display: block; position: relative; float:left; padding: 0.22rem; left:0%; } .IMAGECOL img { display:block; width:100%; } .INFOCOL{-ms-flex-preferred-size:37%; flex-basis:37%; width:37%; background: #e9e9f3; float:left; margin-top: 0.075rem; margin-left: 0.075rem; padding: 0.22rem; max-height:100%; } /*TEXT*/ .SUJET {padding-right: .5em; } .COMPANY {color: #FF0004; font-weight:800; line-height:0.8rem} .DATE { line-height:1.35rem; font-weight:300;} .HEAD{font-size:4rem; white-space:nowrap; margin-bottom:1rem; margin-bottom:1.5rem; color: #747691; } .SUBHEAD{font-size:3rem; /*white-space:nowrap;*/ margin-bottom:0.5rem; color: #747691; text-align:center; line-height: 3rem;} .NAME {margin-bottom:0.1rem; font-weight:400; font-size:2.5rem; color: #b0b1c8; line-height:0; letter-spacing: 0.35rem; } .MAIN{font-size:1.144rem; margin-bottom:1.25rem; padding:0 2rem; text-align:center; color: #747691; line-height: 2.2rem; letter-spacing: 0.35rem; } .LINE {background: darkgray; height: 1px; margin-top: 6px; margin-bottom: 6px; } .LINE2{background: darkgray; height: 1px; margin-top: 8px; margin-bottom: 4px;} 

 <div id="FRAME"> <div class="IMAGECOL"><a href="#"> <img src="https://ptkotamas.files.wordpress.com/2017/02/kaolin-cold-drip-900ml-1.jpg?w=246&h=246&crop=1"></a> </div> <div class="INFOCOL"><span class="SUJET">Lorem ipsum dolor sit amet</span><br><div class="LINE"></div><span class="COMPANY">FULLA</span><br><div class="LINE2"></div><span class="DATE">8/25/2017</span> </div> </div> <div id="FRAME"> <div class="IMAGECOL"><a href="#"><img src="https://ptkotamas.files.wordpress.com/2017/02/img_0928.jpg?w=246&h=246&crop=1"></a> </div> <div class="INFOCOL"><span class="SUJET">Lorem ipsum dolor sit amet</span><br><div class="LINE"></div><span class="COMPANY">FULLA</span><br><div class="LINE2"></div><span class="DATE">8/25/2017</span> </div> </div> <div id="FRAME"> <div class="IMAGECOL"><a href="#"><img src="https://ptkotamas.files.wordpress.com/2017/02/esrum-11.jpg?w=329&h=329&crop=1"></a> </div> <div class="INFOCOL"><span class="SUJET">Lorem ipsum dolor sit amet</span><br><div class="LINE"></div><span class="COMPANY">FULLA</span><br><div class="LINE2"></div><span class="DATE">8/25/2017</span> </div> </div> <div id="FRAME"> <div class="IMAGECOL"><a href=#"> <img src="https://ptkotamas.files.wordpress.com/2017/02/kaolin-cold-drip-900ml-1.jpg?w=246&h=246&crop=1"></a> </div> <div class="INFOCOL"><span class="SUJET">Lorem ipsum dolor sit amet</span><br><div class="LINE"></div><span class="COMPANY">FULLA</span><br><div class="LINE2"></div><span class="DATE">8/25/2017</span> </div> </div> 

Answer 1

擺脫position: absolute在CSS的html選擇器中是position: absolute ，如下所示：

html{
font-size:1.15rem;
font-family:HelveticaNeue-Light,"Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
font-weight:500;
line-height:1.2rem;
color: #62647b;
height: 100%;
box-sizing: border-box;
margin: 4rem;
background: gray;
}