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