我最近意识到支持display: flex，但在IE11中充满了错误。现在我无法使用简单的基于网格的菜单。
我有一组按钮，可根据窗口大小调整大小。他们使用flexbox和绝对定位方法，将top，bottom，left和right设置为0。
然而，这在IE11中无法正确显示，我需要支持。我试图找出原因，但由于IE的调试工具非常糟糕，我无法做到。我试图解决所有已知的错误和问题，here.但是，它们都不适用于我。我有最小宽度设置，但不是最小高度。我还试图看看是否可以将相同的bug应用于水平轴，作为verticalm，但没有区别，尝试通过设置宽度以及min-和max-width来解决它。令人高兴的是，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;
}
答案 0 :(得分：2)
IE中没有添加IE的前缀。 autoprefixer.github.io/ - 将有助于添加正确的前缀。
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
请检查小提琴 - https://jsfiddle.net/afelixj/7oa3dzvk/3/
此外position:absolute;无法使用flex。因此使用flex-grow来扩展内容。
答案 1 :(得分：0)
IE 11部分支持Flexbox，您可以使用caniuse来检查支持哪些属性，还可以阅读以下链接，了解如何通过不同的浏览器规范化Flexbox。 http://philipwalton.com/articles/normalizing-cross-browser-flexbox-bugs/