display: flex unterstützt nicht in IE8

Ich habe ein Problem mit der Anzeige in IE8 browser, da es meine Blöcke in einer ganzen Zeile anzeigt. Es soll schweben, wie es in Chrome browser tut. Was muss behoben werden, um in IE8 zu arbeiten?display: flex unterstützt nicht in IE8

Hier ist mein Code: ` 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> 

    `

und CSS-Teil ist`

 *, *: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; 
    } 
    `

Quelle

2016-06-30 Narayanan

Flex wurde zum ersten Mal mehr ** Jahre eingeführt ** nach IE8 veröffentlicht wurde. Natürlich unterstützt es das nicht. –

können Sie Benutzer float links – Afsar

Ich habe versucht mit float: links; aber mit IE ändert sich nichts. – Narayanan

I geschieht becuase, ie-8 unterstützt keine flex Eigenschaft, aber kein Problem, wir haben eine Lösung dafür.

Zunächst einmal verwenden dh spezifischen Sheet wie

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

dann sind css followsing in diesem ie.css Datei,

.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; 
}

Stellen Sie sicher, ein div mit Klasse hinzufügen ". clearfix 'nach dem letzten' Artikel‘, wie

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

Und es wird für dh auch funktionieren.

Ihre vollständige HTML-Seite wird so sein,

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

Quelle

2016-06-30 06:02:39

Ich habe versucht, die ie.css direkt über meine style.css hinzuzufügen. Ich fügte auch den Clearfix nach dem letzten Punkt hinzu, trotzdem scheint mein IE Probleme damit zu haben. Ich habe die Änderungen zusammen mit meinen vorherigen Änderungen vorgenommen, einschließlich float: left und * display: inline. – Narayanan

Fügen Sie ie.css unter style.css hinzu, indem Sie ie-spezifische Stile verwenden, die ich erwähnt habe. Es ist nicht notwendig, aber halten Sie style.css und ie.css Pfad gleich, so wird es überhaupt keine Verwirrung geben. –

Ja, ich habe die Reihenfolge der Stylesheets vertauscht. Was ich in IE immer noch sehe ist, dass sie keine Ränder zwischen den Elementen haben, aber wenn ich manuell den Rand in .grid .item {} unter ie.css einstelle, hat das Auswirkungen auf das Layout in Chrome. Wo muss ich genau ändern, um die Dinge ordentlich zu machen? – Narayanan

display: flex unterstützt nicht in IE8

Antwort

Verwandte Themen