顯示：flex在IE8中不支持

我在IE8 browser中遇到顯示問題，因爲它在整行中顯示我的塊。它應該是浮動的，就像它在Chrome browser中那樣。什麼需要解決才能在IE8中工作。顯示：flex在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; 
    } 
    `

來源

2016-06-30 Narayanan

的Flex首次推出幾個** **年IE8發佈之後。當然，它不支持它。 –

你可以用戶浮動左邊 – Afsar

我試過用float：left;但IE沒有改變。 – Narayanan

我發生監守，即-8不支持Flex財產，但沒有問題，我們有一個解決方案。

首先使用即特定的樣式表如，

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

然後包括在ie.css文件followsing 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; 
}

確保添加帶班一個div 」。 clearfix項目」 '最後的後'，像

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

它將爲即也行。

你完整的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>

來源

2016-06-30 06:02:39

我已經嘗試在我的style.css之上添加ie.css。我還在最後一項後添加了clearfix，但我的IE似乎遇到了問題。我已經做了修改以及以前的更改，包括float：left和* display：inline。 – Narayanan

使用我提到的特定於ie的樣式，在style.css下面添加ie.css。這是沒有必要的，但保持style.css和ie.css路徑相同，所以不會有任何混淆。 –

是的，我交換了樣式表的順序。不過，我在IE中看到的是，它們之間沒有邊距，但如果在ie.css下手動設置.grid .item {}中的邊距，則會影響Chrome中的佈局。我需要改變什麼才能讓事情變得整潔？ – Narayanan

顯示：flex在IE8中不支持

回答

相關問題