IE 11中的CSS Display Flex无法正常工作,图像会过时

时间:2017-06-08 19:16:33

标签: html css css3 flexbox

我正在使用CSS display: flex;以某种方式显示它们。在Chrome中它看起来很完美,就像很漂亮,但在IE中,图像超出了我所拥有的元素。

https://jsfiddle.net/m42k7Lk5/8/

.award-logos {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  box-orient: horizontal;
  flex-direction: row;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -moz-box-align: center;
  box-align: center;
  align-items: center
}

.award-logos .wrapper {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  box-flex: 1;
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 10px 17px;
  margin: 5px 0;
  text-align: center;
  border-right: 1px dotted #000
}

.wrapper img {
  max-height: 150px
}
<div class="col-md-12 award-logos">
  <div class="wrapper">
    <img src="https://www.hsjaa.com/images/joomlart/demo/default.jpg">
  </div>
  <div class="wrapper">
    <img src="https://www.hsjaa.com/images/joomlart/demo/default.jpg">
  </div>
  <div class="wrapper">
    <img src="https://www.hsjaa.com/images/joomlart/demo/default.jpg">
  </div>
  <div class="wrapper">
    <img src="https://www.hsjaa.com/images/joomlart/demo/default.jpg">
  </div>
</div>

有人可以帮忙吗?

0 个答案:

没有答案