Flex布局在IE中的兼容性问题总结

最新推荐文章于 2023-08-14 13:05:43 发布

凯迪blak

最新推荐文章于 2023-08-14 13:05:43 发布

阅读量4.8k

点赞数 1

分类专栏：前端 IE 兼容性文章标签： flex css

本文链接：https://blog.csdn.net/Scryhuaihuai/article/details/106279293

版权

前端同时被 3 个专栏收录

7 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

兼容性

1 篇文章 0 订阅

订阅专栏

Flex布局在IE中的兼容性问题总结

以下代码片段没有特别说明，则均为有兼容性问题的代码

一、在IE10和IE11中，父容器中flex-direction:column 和 align-items:center，这俩属性同时存在，子容器内容过多会溢出容器

<style>
  .FlexContainer {
    background: hsla(0,0%,0%,.1);
    display: flex;
    flex-direction: column;
    height: 200px;
    justify-content: center;
    align-items: center;
    margin: 1em;
    padding: 2em;
    width: 300px;
  }
  .FlexItem {
    background: hsla(0,0%,0%,.1);
    padding: 1em;
  }
</style>
<script src="js/jquery-1.9.1.min.js"></script>

</head>
<body>
<div class="FlexContainer">
  <div class="FlexItem">
    The contents inside of this box are overflowing their container.
  </div>
</div>
</body>

解决方式：给子容器加max-width: 100%

二、IE10和IE11下，父容器flex-direction:row，子容器内容过多会溢出容器

<style>
    .FlexContainer {
      background: hsla(0,0%,0%,.1);
      display: flex;
      flex-direction: row;
      height: 200px;
      margin: 1em;
      padding: 2em;
      width: 300px;
    }
    .FlexItem {
      background: hsla(0,0%,0%,.1);
      padding: 1em;
    }
  </style>
</head>
<body>
<div class="FlexContainer">
  <div class="FlexItem">
    The contents inside of this box are overflowing their container.
  </div>
</div>
</body>

解决方式：给子容器加max-width: 100%

三、IE11中，父容器flex-direction:column，img无法保持宽高比缩放

<style>
    .FlexContainer {
      background: hsla(0,0%,0%,.1);
      display: flex;
      flex-direction: column;
      height: 300px;
      margin: 1em;
      width: 300px;
    }
    img {
      height: auto;
      width: 100%;
    }
  </style>
</head>
<body>
<div class="FlexContainer">
  <img src="http://placehold.it/800x200/333">
</div>
</body>

解决方式：给img包一层div

四、IE10和IE11中，父容器flex-direction:row，img无法保持宽高比缩放

  <style>
    .FlexContainer {
      background: hsla(0,0%,0%,.1);
      display: flex;
      flex-direction: row;
      height: 300px;
      margin: 1em;
      width: 300px;
    }
    img {
      height: auto;
      width: 100%;
    }
  </style>
</head>
<body>
<div class="FlexContainer">
  <img src="http://placehold.it/800x200/333">
</div>
</body>

解决方式：
IE10：父容器设置align-items
IE11:a.给img包一层div；b.容器设置align-items

五、IE10和IE11中，flex-direction: row，子容器设置flex-basis确切值（auto除外），子容器中 box-sizing:border-box不会生效

<style>
    .FlexContainer {
      background: hsla(0,0%,0%,.1);
      display: flex;
      flex-direction: row;
      padding: 1em;
    }
    .FlexItem {
      background: hsla(0,0%,0%,.1);
      border: 1em solid transparent;
      box-sizing: border-box;
      flex: 0 0 100%;
      padding: 1em;
      text-align: center;
    }
  </style>
</head>
<body>
<div class="FlexContainer">
  <div class="FlexItem">Item with padding and border</div>
</div>
</body>