美文网首页
flex的IE兼容性问题

flex的IE兼容性问题

作者: 小松鼠hust | 来源:发表于2018-03-02 09:23 被阅读884次

flex的IE兼容性

在 IE11 上 align-items 对于父元素设置 min-hight 高度不能实现垂直居中。设置为 height: 20px 就可以了。
示例:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
 .ct{
      display: flex;
      align-items: center;
      justify-content: center;
     min-height: 3em;
     background: #f00;
}
.item{
  background: #ccc;
}
  </style>
  <title>flex的IE兼容性问题</title>
</head>
<body>
  <div class="ct">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
</body>
</html>

相关文章

网友评论

      本文标题:flex的IE兼容性问题

      本文链接:https://www.haomeiwen.com/subject/ajvoxftx.html