0
我最近意識到支持display: flex，但在IE11中有很多bug。現在我無法使我的簡單網格菜單工作。IE11顯示：flex讓我很悲傷。爲什麼顯示不正確？
我有一組按鈕，根據窗口大小，其調整它們的大小。他們利用Flexbox的和絕對定位的方式，與頂部，底部，左側和右側設置爲0
然而，這並不正確IE11，我需要支持顯示。我試圖找出原因，但由於IE的極端惡劣的調試工具，我一直無法。我試圖通過所有已知的錯誤和問題，聲稱here.但是，它們都不適用於我。我有最小寬度集，但不是最小高度。我也試着看看是否同樣的bug可以應用於水平軸，因爲垂直軸，但它沒有什麼區別，試圖通過設置寬度，以及最小和最大寬度來解決它。令人高興的是IE現在終於和JSFiddle一起工作了，所以我很容易重現錯誤。
我怎樣才能讓內容顯示爲在Chrome中做？
https://jsfiddle.net/7oa3dzvk/
HTML：
<body><div class="wrapper"><div class="middle"><div class="centering-container"><div class="container"><div class="row"><div class="col-sm-6 col-xs-12"><div class="container"><div class="row padding-top">
<div class=" col-xs-6">
<div class="square-box pull-right">
<div class="auto-height-ratio-content E-envi" onclick="listTestBanksByEnvironment('E')">E</div>
</div>
</div>
<div class="col-xs-6 ">
<div class="square-box">
<div class="auto-height-ratio-content F-envi" onclick="listTestBanksByEnvironment('F')">
<div class="center-text ">F</div>
</div>
</div>
</div>
</div></div></div></div></div></div></div></div></body>
CSS：（最相關的接近底部，因爲大部分是自舉產生，但仍然需要完整的例子）
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
* {
font-family: Lato;
}
* {
outline: none;
}
body {
margin: 0;
}
html {
font-family: sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
::after, ::before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.row {
margin-right: -15px;
margin-left: -15px;
}
.padding-top {
padding-top: 30px;
}
.container {
overflow: hidden;
}
.container {
display: block;
width: auto;
background: #FAFAFA;
padding: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.btn-group-vertical > .btn-group::after, .btn-group-vertical > .btn-group::before, .btn-toolbar::after, .btn-toolbar::before, .clearfix::after, .clearfix::before, .container-fluid::after, .container-fluid::before, .container::after, .container::before, .dl-horizontal dd::after, .dl-horizontal dd::before, .form-horizontal .form-group::after, .form-horizontal .form-group::before, .modal-footer::after, .modal-footer::before, .nav::after, .nav::before, .navbar-collapse::after, .navbar-collapse::before, .navbar-header::after, .navbar-header::before, .navbar::after, .navbar::before, .pager::after, .pager::before, .panel-body::after, .panel-body::before, .row::after, .row::before {
display: table;
content: " ";
}
.btn-group-vertical > .btn-group::after, .btn-toolbar::after, .clearfix::after, .container-fluid::after, .container::after, .dl-horizontal dd::after, .form-horizontal .form-group::after, .modal-footer::after, .nav::after, .navbar-collapse::after, .navbar-header::after, .navbar::after, .pager::after, .panel-body::after, .row::after {
clear: both;
}
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
/* @media all and (min-width:768px) */
.container {
width: 750px;
}
/* @media all and (min-width:992px) */
.container {
width: 970px;
}
/* @media all and (min-width:1200px) */
.container {
width: 1170px;
}
.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
.col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
float: left;
}
.col-xs-12 {
width: 100%;
}
/* @media all and (min-width:768px) */
.col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9 {
float: left;
}
/* @media all and (min-width:768px) */
.col-sm-6 {
width: 50%;
}
.middle {
width: 100%;
margin-top: 65px;
position: relative;
}
.wrapper {
max-width: 1280px;
margin: 0 auto;
}
body {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
line-height: 1.4285;
color: #333;
background-color: #fff;
}
body {
width: 100%;
}
html {
font-size: 10px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.col-xs-6 {
width: 50%;
}
.pull-right {
float: right;
}
.square-box {
position: relative;
min-width: 70px;
max-width: 150px;
width: 100%;
font-size: 75px;
display: flex;
align-items: center;
justify-content: center;
}
.square-box::before {
content: "";
padding-top: 100%;
}
.F-envi {
background-color: #99bfc2;
color: #003946;
}
.E-envi {
background-color: #d1c99d;
color: #003946;
}
.auto-height-ratio-content {
-moz-transition: all 0.2s;
-o-transition: all 0.2s;
-webkit-transition: all 0.2s;
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.pull-right {
float: right;
}
.pull-right {
float: right !important;
}
雖然這不完全完美，但它工作:)。 IE不會爲每個菜單元素顯示相同的寬度和高度，但至少它會以令人滿意的方式顯示它們，並且只需對代碼進行最小限度的更改。韋爾先生，先生。謝謝。 – KjetilNordin