display：flex在IE8中不支持

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了display：flex在IE8中不支持相关的知识，希望对你有一定的参考价值。

我在IE8 browser中有一个显示问题，因为它显示我的块整行。它应该漂浮，就像它在Chrome browser中那样。需要修复什么才能在IE8中工作。

这是我的代码：`IE

    </head>

    <body>

    <div class="grid">
      <div class="item">
        <h3>Item</h3>
      </div>
      <div class="item">
        <h3>Item</h3>
      </div>
      <div class="item">
        <h3>Item</h3>
      </div>
      <div class="item">
        <h3>Item</h3>
      </div>
      <div class="item">
        <h3>Item</h3>
      </div>
      <div class="item">
        <h3>Item</h3>
      </div>
      <div class="item">
        <h3>Item</h3>
      </div>
      <div class="item">
        <h3>Item</h3>
      </div>
      <div class="item">
        <h3>Item</h3>
      </div>
      <div class="item">
        <h3>Item</h3>
      </div>
    </div>

    </body>
    </html>

     `

和css部分是`

     *, *:before, *:after {
      box-sizing: border-box;
    }

    html, body {
      width: 100%;
      height: 100%;
      font-family: Helvetica;
    }

    body {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
          -ms-flex-pack: center;
              justify-content: center;
      -webkit-box-align: center;
      -webkit-align-items: center;
          -ms-flex-align: center;
              align-items: center;
    }

    img {
      max-width: 100%;
      height: auto;
    }

    .grid {
      width: 1024px;
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-flex-flow: row wrap;
          -ms-flex-flow: row wrap;
              flex-flow: row wrap;
      padding: 32px;
      background-color: #ddd;
    }
    .grid:after {
      content: "";
      -webkit-box-flex: 1;
      -webkit-flex: auto;
          -ms-flex: auto;
              flex: auto;
      margin-left: -1%;
    }
    .grid .item {
      -webkit-box-flex: 1;
      -webkit-flex: 1 0 24.25%;
          -ms-flex: 1 0 24.25%;
              flex: 1 0 24.25%;
      max-width: 24.25%;
      margin-bottom: 10px;
      text-align: center;
      background-color: #bbb;
    }
    .grid .item:nth-child(4n+2), .grid .item:nth-child(4n+3), .grid 
     .item:nth-child(4n+4) {
      margin-left: 1%;
    }
    .grid .item:nth-child(4n+1):nth-last-child(-n+4), .grid .item:nth-

     child(4n+1):nth-last-child(-n+4) ~ .item {
      margin-bottom: 0;
    }
    `
答案

我发生了因为，即-8不支持flex属性，但没有问题，我们有一个修复。

首先使用ie特定样式表作为，

<!--[if lte IE 9]>
    <link rel="stylesheet" type="text/css" href="path to file/ie.css" />
<![endif]-->

然后在ie.css文件中包含跟随css，

.grid {
  display:block;
  margin-left:auto;
  margin-right:auto;
}

.grid .item {
  float:left;
  width: 24.25%;
 }  

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both; 
}

确保在最后一个'item'之后添加一个带有'.clearfix'类的div，比如

<div class="grid">
  <div class="item">
    <h3>Item</h3>
  </div>
  <div class="item">
    <h3>Item</h3>
  </div>
  <div class="item">
    <h3>Item</h3>
  </div>
  <div class="item">
    <h3>Item</h3>
  </div>
  <div class="item">
    <h3>Item</h3>
  </div>
  <div class="item">
    <h3>Item</h3>
  </div>
  <div class="item">
    <h3>Item</h3>
  </div>
  <div class="item">
    <h3>Item</h3>
  </div>
  <div class="item">
    <h3>Item</h3>
  </div>
  <div class="item">
    <h3>Item</h3>
  </div>

  <div class="clearfix"></div>

</div>

它也适用于ie。

您的完整HTML页面将是这样的，

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
*, *:before, *:after {
      box-sizing: border-box;
    }

    html, body {
      width: 100%;
      height: 100%;
      font-family: Helvetica;
    }

    body {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
          -ms-flex-pack: center;
              justify-content: center;
      -webkit-box-align: center;
      -webkit-align-items: center;
          -ms-flex-align: center;
              align-items: center;
    }

    img {
      max-width: 100%;
      height: auto;
    }

    .grid {
      width: 1024px;
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-flex-flow: row wrap;
          -ms-flex-flow: row wrap;
              flex-flow: row wrap;
      padding: 32px;
      background-color: #ddd;
    }
    .grid:after {
      content: "";
      -webkit-box-flex: 1;
      -webkit-flex: auto;
          -ms-flex: auto;
              flex: auto;
      margin-left: -1%;
    }
    .grid .item {
      -webkit-box-flex: 1;
      -webkit-flex: 1 0 24.25%;
          -ms-flex: 1 0 24.25%;
              flex: 1 0 24.25%;
      max-width: 24.25%;
      margin-bottom: 10px;
      text-align: center;
      background-color: #bbb;
    }
    .grid .item:nth-child(4n+2), .grid .item:nth-child(4n+3), .grid 
     .item:nth-child(4n+4) {
      margin-left: 1%;
    }
    .grid .item:nth-child(4n+1):nth-last-child(-n+4), .grid .item:nth-

     child(4n+1):nth-last-child(-n+4) ~ .item {
      margin-bottom: 0;
    }
</style>

<!--[if lte IE 9]>
    <link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->
</head>



<body>

<div class="grid">
      <div class="item">
        <h3>Item</h3>
      </div>
      <div class="item">
        <h3>Item</h3>
      </div>
      <div class="item">
        <h3>Item</h3>
      </div>
      <div class="item">
        <h3>Item</h3>
      </div>
      <div class="item">
        <h3>Item</h3>
      </div>
      <div class="item">
        <h3>Item</h3>
      </div>
      <div class="item">
        <h3>Item</h3>
      </div>
      <div class="item">
        <h3>Item</h3>
      </div>
      <div class="item">
        <h3>Item</h3>
      </div>
      <div class="item">
        <h3>Item</h3>
      </div>

      <div class="clearfix"></div>

    </div>
</body>
</html>

以上是关于display：flex在IE8中不支持的主要内容，如果未能解决你的问题，请参考以下文章

解决 各浏览器不支持display:flex的最简单办法

IE8 兼容性总结

显示：flex 在 Chrome 中不起作用

ie8中不支持Object.create

Flexbox 在 Firefox 的按钮中不起作用

css常用代码片段 (更新中)