css - 显示 :flex is not supporting in IE8

标签 css internet-explorer-8 flexbox

我在 IE8 browser 中有显示问题,因为它整行显示我的 block 。它应该是 float 的,就像它在 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;
    }
    `

最佳答案

我碰巧是因为 ie-8 不支持 flex 属性,但没问题,我们有解决方案。

首先使用即特定样式表作为,

<!--[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>

关于css - 显示 :flex is not supporting in IE8,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38114796/

相关文章:

html - 基于 Bootstrap 的页面底部有很多空白区域,页脚显示不正确

css - IE CSS 错误 : background-color: transparent behaves differently to background-color: (any other colour)

html - 显示 : inline-flex has greater height than sibling span 的 Span 元素

html - 响应式布局,每一行的间距都在增长

c# - 建议使用 c# 和 css 为用户提供选择以将页面字体大小更改为任何可能数字的方法

html - 位置相对div内的绝对?

css - 无法在 ie 8 上点击网页中的链接

d3.js - 使 d3.js 与 ie 兼容

css - handsontable 的初始宽度没有很好地设置在 flexbox 中

css - 如何更新 Site.less/site.css 和 bundle/minify 以使用 BuildBundlerMinifier 生成输出