Hallo,
irgendwie will der IE 10 Flexbox nicht korrekt darstellen.
Hier mal mein Code:
HTML-Code:
<!DOCTYPE HTML>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Flexbox ab IE 10</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style type="text/css">
body {
font: 1em sans-serif;
padding: 0;
margin: 0;
color: #333;
background: #e2e3e5;
}
.seitenbreite {
max-width: 63em;
padding: 0;
margin: 0 auto;
}
section .seitenbreite #content {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
section .seitenbreite #content #inhalt {
background: #0F0; /* Grün */
-ms-flex: 1;
-webkit-flex: 1;
flex: 1;
-webkit-order: 2;
-ms-flex-order: 2;
order: 2;
}
section .seitenbreite #content #navi {
background: #FF9; /* Gelb */
min-width: 14em;
-webkit-order: 1;
-ms-flex-order: 1;
order: 1;
}
@media screen and (max-width: 781px) {
section .seitenbreite #content {
width: 100%;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
}
section .seitenbreite #content #inhalt {
width: 100%;
-ms-flex-order: 1;
-webkit-order: 1;
order: 1;
background: #0Ce; /* Blau */
color: #009;
}
section .seitenbreite #content #navi {
min-width: none;
width: 100%;
-ms-flex-order: 2;
-webkit-order: 2;
order: 2;
background: #C9C; /* Lilla */
}
}
</style>
</head>
<body>
<section>
<div class="seitenbreite">
<div id="content">
<div id="inhalt">
<h1>Content</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam auctor accumsan enim, id finibus sapien imperdiet
a. Ut laoreet imperdiet diam quis tincidunt. Fusce risus est, suscipit ut turpis id, vehicula sodales libero.
-Nulla a elementum risus. Morbi fringilla, ligula ac pretium bibendum, felis erat consequat nunc, in blandit
velit quam eu eros. Nam convallis in sem eu mollis. Mauris venenatis magna vulputate odio aliquet, sit amet
dapibus tortor luctus. In mauris massa, aliquet nec nisl ut, feugiat tincidunt dolor. Mauris tristique felis eu
tempus vestibulum. Nulla fringilla molestie consequat. Pellentesque eget porta urna.</p>
</div><!-- Ende inhalt -->
<div id="navi">
<ul>
<li><a href="#">Seite 1</a></li>
<li><a href="#">Seite 2</a></li>
<li><a href="#">Seite 3</a></li>
<li><a href="#">Seite 4</a></li>
<li><a href="#">Seite 5</a></li>
<li><a href="#">Seite 6</a></li>
<li><a href="#">Seite 7</a></li>
<li><a href="#">Seite 8</a></li>
<li><a href="#">Seite 9</a></li>
</ul>
</div><!-- Ende navi -->
</div><!-- Ende content -->
</div><!-- Ende seitenbreite -->
</section>
</body>
</html>
In der Desktop Ansicht funktioniert alles so wie es soll. Wird das Display beim Internet-Explorer 10 kleiner, überlagert sich die Bereiche. Zudem wird die Hintergrundfarbe (Blau) nicht dargestellt!
In moderne Browser funktioniert das alles wie gewünscht, möchte den Code aber ab IE10 kompatibel haben.
Wer kann mir hier helfen?
Vielen Dank vorab.